引导菜单在单击时更改 li 活动类答案

【问题标题】：Bootstrap menu change li active class on click引导菜单在单击时更改 li 活动类
【发布时间】：2014-04-26 10:05:13
【问题描述】：

我有以下引导菜单

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>

当点击 home 或 work 时，如何将 <li> 类更改为活动状态？

以下内容不适合我

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

【问题讨论】：

标签： javascript html twitter-bootstrap

【解决方案1】：

您的一个选择器格式不正确，通过查看您的 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");
});

【讨论】：

【解决方案2】：

更新

您的 css 选择器似乎是错误的。请尝试如下所示，

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

</script>

我为此here创建了一个plunkr

【讨论】：

请看我更新的答案。我创建了一个 plunkr - plnkr.co/edit/4qhuzgnCXUm86rCoUPii 。这不是你所追求的吗？
感谢您的帮助，但由于某种原因它仍然无法正常工作。在我的网站 www.ericbartolo.com 上查看它，您可以检查元素。谢谢
好吧，没关系，我关注了你的 plunkr，它现在正在工作，我错过了这个功能，我多么鲁莽。非常感谢@THara

【解决方案3】：

试试这个：

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

您将不得不使用给定的标签来玩弄它。帮助我的是声明 this 变为活动状态，然后删除活动类。

【讨论】：

【解决方案4】：

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

这是对我有用的解决方案。我声明它变为活动并删除活动类，还添加了 .siblings() 方法，该方法允许您搜索文档中 li 元素的兄弟姐妹。

【讨论】：

为此：$(.ul li) 我想你的意思是：$(ul li) - 假设 ul 是一个元素而不是一个类。

【解决方案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>

【讨论】：

【解决方案6】：

我找到了另一种非常容易使用的解决方法。

  <div class="navbar-collapse collapse">
     <ul class="nav navbar-nav">
       <li class="<?php if($page=="home.html"){echo "active";} ?>"> id="homeL"><a data-scroll href="home.html">Home</a></li>
       <li class="<?php if($page=="about.html"){echo "active";} ?>"><a href="about.html">About</a></li>
       <li class="<?php if($page=="work.html"){echo "active";} ?>"> id="workL"><a data-scroll href="work.html">Work</a></li>
       <li class="<?php if($page=="contact.html"){echo "active";} ?>"><a href="contact.html">Contact</a></li>
    </ul>
  </div>

【讨论】：