页面导航上的引导按钮无效（Drupal 7）答案

【问题标题】：Bootstrap button not active on page navigation (Drupal 7)页面导航上的引导按钮无效（Drupal 7）
【发布时间】：2023-03-18 13:22:01
【问题描述】：

我有一个引导按钮组，其中包含几个按钮，每个按钮都有一个链接到新页面的标签。我添加了 jquery 代码，用于在单击按钮时保持活动状态。仅当没有#href 时，按钮才会在单击时保持活动状态。当有链接并加载新页面时，活动状态将丢失。有人可以帮忙吗？我很迷茫！

这里是sn-p- html:

<div class="btn-group">
    <a class="btn btn-custom">Home </a> 
    <a class="btn btn-custom" href="/link1"> About us </a>
    <a class="btn btn-custom" href="/link2"> Contact us </a>
</div>

jquery：

$(".btn-group > .btn").click(function(){
    $(this).addClass("active").siblings().removeClass("active");
});

【问题讨论】：

我还将这些按钮更改为导航选项卡，并将此解决方案用于持久选项卡aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap，但无济于事。同样的问题。加载新页面时，活动状态会丢失。

标签： jquery twitter-bootstrap button

【解决方案1】：

我不知道是否可以在新页面加载时保持活动状态。

但是，一个简单的解决方法是通过引导程序在每个页面上应用样式，以便相应的按钮显示为活动状态。例如，如果您在页面链接 1：

<div class="btn-group">
    <a class="btn btn-custom">Home </a> 
    <a class="btn btn-custom active" href="/link1"> About us </a>
    <a class="btn btn-custom" href="/link2"> Contact us </a>
</div>

这会使按钮看起来是活动的。

【讨论】：

谢谢，但这会使所有按钮在开始时都处于活动状态。我希望它们仅在单击它们并加载页面时才处于活动状态。
因此，如果我在“主页”页面上，您不希望任何按钮处于活动状态。但是，如果我要单击“link1”，您是否希望在页面加载正确时链接 1 的按钮处于活动状态？
是的，没错。当我在链接 1 上时，页面加载，链接 1 按钮处于活动状态，其余按钮不活动。
因此，您需要转到 link1.html 页面，然后将我的答案中的代码块粘贴到 html 页面中。这应该提供您想要的功能。保持主页不变。
抱歉，我在 drupal 7 上使用了一个跨所有页面的引导按钮块。那是不可能的。

【解决方案2】：

如果有人也在寻找解决方案，这最终对我有用。将按钮更改为导航和列表。

  var url = window.location;
    // Will only work if string in href matches with location
    $('ul.nav a[href="' + url + '"]').parent().addClass('active');
    // Will also work for relative and absolute hrefs
    $('ul.nav a').filter(function() {
        return this.href == url;
    }).parent().addClass('active');

来自Twitter Bootstrap add active class to li

【讨论】：