![](/img/trans.png)
[英]Bootstrap navbar menu item li a change the active class when in the specific page
[英]Bootstrap menu change li active class on click
我有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");
});
更新
你的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");
});
您必须使用给定的标签来玩它。 什么帮助我在这个声明变得活跃,然后除去活动类。
你的一个选择器格式不正确,通过查看你的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.