引导菜单在点击时更改li活动类 [英] Bootstrap menu change li active class on click

问题描述

我通过bootstrap获得了以下菜单

HTML

  < div class =navbar-collapse collapse> 
< ul class =nav navbar-nav> 
< li class =activeid =homeL>< a data-scroll href =＃Home>主页< / a>< / li> 
< li>< a href =＃>关于< / a>< / li> 
< li class =id =workL>< a data-scroll href =＃Work> Work< / a>< / li> 
< li>< a href =＃>联络人< / a>< / li> 
< / ul> 
< / div> 
  

如何更改< li>



以下不适用于我



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

我为这个这里

I have the following menu by 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>

how can I alter changing the <li> class to active when either home or work is clicked?

The following isn't working for me

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

解决方案

UPDATED

Your css selectors seems to be wrong. Please try as given below,

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

</script>

I have created a plunkr for this here

这篇关于引导菜单在点击时更改li活动类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！