动态添加活动类到引导菜单并打开其页面

Question

这是HTML我为导航栏创建的代码bootstrap.

<div id="menu">
    <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">videos</a></li>
        <li><a href="#">Comment</a></li>
        <li><a href="#">About</a></li>
        <li ><a href="contact_us.html">Contact</a></li>
    </ul>
</div>

现在我需要添加此li的active动态类的菜单项时页面打开.

我只是检查这两个stackoverflow问题:一个 | 二

但我无法弄清楚这一点.

这是我的javascript -

$('#menu > ul.navbar-nav li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});

希望有人能帮助我.谢谢.

Answer 1

由于您使用的是Bootstrap,请包含defult javascript plugins bootstrap.js或缩小的bootstrap.min.js,您可以通过向您的li元素添加data-toggle ="tab"来动态激活菜单项

<div id="menu">
    <ul class="nav navbar-nav">
        <li data-toggle="tab"><a href="index.html">Home</a></li>
        <li data-toggle="tab"><a href="#">Gallery</a></li>
        <li data-toggle="tab"><a href="#">videos</a></li>
        <li data-toggle="tab"><a href="#">Comment</a></li>
        <li data-toggle="tab"><a href="#">About</a></li>
        <li data-toggle="tab"><a href="contact_us.html">Contact</a></li>
    </ul>
</div>

如官方文档中所述,请在此处查看

只需在元素上指定data-toggle ="tab"或data-toggle ="pill",即可激活制表符或精选导航而无需编写任何JavaScript.将nav和nav-tabs类添加到选项卡ul将应用Bootstrap选项卡样式,而添加nav和nav-pills类将应用丸样式.

Answer 2

我认为这条线可以解决问题

你是说

$('.navbar li.active').removeClass('active');

但是没有任何元素具有.navbar您应该说的类.nav。

$('.nav li.active').removeClass('active');

演示版