我有很长的bootstrap主题类结构。
这是我正在设计的菜单。
在bootstrap中使用此菜单栏设计的代码 -
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span
class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</a><a class="brand" href="#">My Menu</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="/Home/Dashboard"><i class="icon-home icon-white"></i>Dashboard</a></li>
<li ><a href="#" id="taskMainLink">Task</a></li>
<li><a href="#" id="contactMainLink">Contact</a></li>
<li><a href="#" id="appointmentMainLink">Appointment</a></li>
<li><a href="#" id="projectMainLink">Project</a></li>
<li><a href="#" id="salesMainLink">Sales</a></li>
</ul>
现在发行
我希望每个标签在鼠标点击时处于活动状态,其他标签应处于原始状态。 我做的当前活动类是仪表板。
我每次点击任何标签时都会关注我的结构
$('.navbar.navbar-fixed-top.navbar-inverse>.container-fluid>.nav-collapse>.nav').click(function(){
$(this).find('li').removeClass('active');
$(this).addClass('active');
});
我上课了吗?如果我在这里错了,请建议我正确的解决方案。
答案 0 :(得分:3)
试试这个:
$('ul.nav li a').click(function(){
$(this).parent().parent().children('.active').removeClass('active');
$(this.parentNode).addClass('active');
return false;
});
答案 1 :(得分:0)
这应该可以解决问题:
$('ul.nav li a').click(function(e){
e.preventDefault();
$(this).parent().find('li.active').removeClass('active');
$(this).addClass('active');
});
答案 2 :(得分:0)
我认为您可能更容易使用为您执行此操作的bootstrap buttonDropdown组件。
尝试将这些按钮下拉列表与buttonGroups组件一起使用,以使按钮组合在一起并应用您的css,使其看起来就像您的菜单。
您不需要任何额外的JavaScript来使您的菜单有效!