Question

我有一个带有几个按钮的引导按钮组，每个按钮都带有一个链接到新页面的标签。我已经添加了jquery代码，用于在单击按钮时保留活动状态。只有在没有#href的情况下，按钮才会保持活动状态。当存在链接并且加载新页面时，活动状态将丢失。有人可以帮忙吗？我迷路了！

这是片段 - 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");
});

Answer 1

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

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

<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>

这会使按钮显示为活动状态。

Answer 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

页面导航上没有激活Bootstrap按钮（Drupal 7）

2 个答案: