启动菜单更改李活动类点击

Bootstrap menu change li active class on click

本文关键字：活动 菜单 李活动 启动      更新时间：2023-09-26

我通过引导获得以下菜单

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");
});

更新

您的css选择器似乎是错误的。请按照下面给出的方式尝试，

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

我已经为此创建了一个plunkr。

试试这个：

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

你将不得不用你给定的标签来摆弄它。帮助我的是将this声明为活动，然后删除活动类。

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

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

这是对我有效的解决方案。我宣布它变为活动的，并删除了活动类，还添加了.siblings((方法，该方法允许您在文档中搜索li元素的同级元素。

包含此脚本

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

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

  <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>
相关文章：