Question

我有bootstrap的以下菜单

HTML

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="active" id="homeL"><a data-scroll href="#Home">Home</a></li>
    <li><a href="#">About</a></li>
    <li class="" id="workL"><a data-scroll href="#Work">Work</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

如果点击家庭或工作时如何更改<li>班级？

以下内容对我不起作用

$("#homeL").on("click",function(){
  $(".nav navbar-nav li").removeClass("active");
  $(this).addClass("active");
});

Answer 1

<强>已更新

你的css选择器似乎错了。请尝试如下，

<script>
    $(".nav li").on("click", function() {
      $(".nav li").removeClass("active");
      $(this).addClass("active");
    });

</script>

我为此here

创建了一个plunkr

Answer 2

试试这个：

$("ul li").on("click", function() {
    $("li").removeClass("active");
    $(this).addClass("active");
  });

您必须使用给定的标签来玩它。帮助我的是宣布此变为活动状态，然后删除活动类。

Answer 3

你的一个选择器格式不正确，通过查看你的html看起来像在脚本的第三行，选择器没有做我认为你想要的。

$("#homeL, #workL").click(function(){

  //$(".nav navbar-nav li") <-this is looking for a <li> inside a <navbar-nav>  
  // tag inside a tag with the class "nav"

  $(".nav.navbar-nav li").removeClass("active");
  $(this).addClass("active");
});

Answer 4

    $(".ul li").on("click", function() {
        $(this).siblings().removeClass('active');
        $(this).addClass("active");
    });

这是适合我的解决方案。我声明它变为活动状态并删除活动类并添加.siblings（）方法，该方法允许您搜索文档中li元素的兄弟节点。

Answer 5

包含此脚本

    <script type="text/javascript">
    $(function(){
        $('.nav a').filter(function(){
            return this.href==location.href}).parent().addClass('active').siblings().removeClass('active');

        $('.nav a').click(function(){
            $(this).parent().addClass('active').siblings().removeClass('active')    
            });
        });
</script>

Answer 6

我发现了另一个很容易使用的解决方法。

except

单击Bootstrap菜单更改li活动类

6 个答案: