javascript - 将事件类动态添加到 Bootstrap 菜单并打开其页面

Question

这是我使用bootstrap为导航栏创建的HTML代码。

<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 问题:one | two

但我想不通。

这是我的 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，请包含默认的 javascript 插件 bootstrap.js 或缩小的 bootstrap.min.js 您可以通过添加 动态激活菜单项>data-toggle="tab" 像这样添加到你的 li 元素中

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

官方文档里写的，查here

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling, while adding the nav and nav-pills classes will apply pill styling.