Bootstrap CSS主动导航

在Bootstrap网站上,subnav与部分相匹配,并随着你的改变背景颜色或滚动到部分。 我想创build我自己的菜单,没有所有的背景颜色和一切,但是,我改变了我的CSS是相似的,但当我向下滚动或单击菜单项上的活动类不会切换。 不知道我在做什么错。

HTML:

<ul class="menu"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About Us</a></li> <li><a href="#contact">Contact</a></li> </ul> 

CSS:

 .menu {list-style:none;} .menu > li {float: left;} .menu > li > a {color:#555;float: none;padding: 10px 16px 11px;display: block;} .menu > li > a:hover {color: #F95700;} .menu .active > a, .menu .active > a:hover {color:#F95700;} 

我检查了这些文件; jQuery,bootstrap.js和bootstrap.css都链接正确。 我必须添加一些额外的jQuery或我缺less一些CSS来获得活跃切换像他们的网站上的subnav菜单?

为了切换这个类,你需要执行一些JavaScript。

在jQuery中:

 $('.menu li a').click(function(e) { var $this = $(this); if (!$this.hasClass('active')) { $this.addClass('active'); } e.preventDefault(); }); 

在JavaScript中:

 var menu = document.querySelector('.menu'); var anchors = menu.getElementsByTagName('a'); for (var i = 0; i < anchors.length; i += 1) { anchors[i].addEventListener('click', function() { clickHandler(anchors[i]) }, false); } function clickHandler(anchor) { var hasClass = anchor.getAttribute('class'); if (hasClass !== 'active') { anchor.setAttribute('class', 'active'); } } 

我希望这有帮助。

这是我结束了,因为你必须清除其他人。

 $('.navbar li').click(function(e) { $('.navbar li.active').removeClass('active'); var $this = $(this); if (!$this.hasClass('active')) { $this.addClass('active'); } e.preventDefault(); }); 

这是我处理twitter bootstrap导航列表的代码:

 $(document).ready(function () { $('ul.nav > li').click(function (e) { e.preventDefault(); $('ul.nav > li').removeClass('active'); $(this).addClass('active'); }); }); 

我使用2个1-liners,这取决于我的导航结构

只要确保你的链接没有任何活动类可以启动。

实际的联系

如果您的导航链接位于单独的HTML文件(如express.js中具有菜单的布局模板),则可以这样做:

 $('ul.nav > li > a[href="' + document.location.pathname + '"]').parent().addClass('active'); 

散列链接

如果他们是哈希,请执行以下操作:

 $('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){ $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); }); 

如果您不想在哈希单击上滚动,则返回false:

  $('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){ $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); return false; }); 

看一些其他的答案,如果你希望网页向下滚动到该部分,当一个侧面菜单被点击时,你不想preventDefault

此外,您只需要删除当前的活动类,并添加一个新的不通过所有李的search。 当您select的列表项目已经激活时,您也希望代码不做任何事情,而不是不必要地添加和删除相同的活动类别。 最后,你应该把你的事件监听器放在一个不是li的元素上,因为它更容易触发iPhone和平板电脑上的点击事件等。还可以使用.delegate所以你不必等待DOM准备好的事件。 所以最后我会做这样的事情(我假设你已经预装了jQuery):

 $('body').delegate('.menu li a', 'click', function(){ var $thisLi = $(this).parents('li:first'); var $ul = $thisLi.parents('ul:first'); if (!$thisLi.hasClass('active')){ $ul.find('li.active').removeClass('active'); $thisLi.addClass('active'); } }); 

我build议这个代码:

  <script> var curentFile = window.location.pathname.split("/").pop(); if (curentFile == "") curentFile = "Default.aspx"; $('ul.nav > li > a[href="' + curentFile + '"]').parent().addClass('active'); </script> 

这是一种魅力。

我做了不同的事情来解决这个问题(fyi,我是一个完整的html / css / js业余爱好者)。

我的每个导航栏button都进入一个新页面。 所以,在每个页面的html中,我把这样的东西放在底部:

 <script type="text/javascript"> $(document).ready( function(){ $("#aboutButton").removeClass("active"); }); $(document).ready( function(){ $("#dashboardButton").addClass("active"); }); </script> 

这让我马上工作。

PS我尝试了接受的答案,但没有运气,因为它也需要从当前活动button中删除“活动”类,以真正“切换”结束。 我相信这是可能的,但是,我对这个东西很新。

testing,它工作正常。

  $('.navbar li').click(function(e) { $('.navbar li.active').removeClass('active'); var $this = $(this); if (!$this.hasClass('active')) { $this.addClass('active'); } }); <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> . . . </ul> 

任何人有这个使用jsp的问题,看你的包。

document.location.pathname给了我:/packagename/index.jsp

但我的导航栏中的href只调用了index.jsp

所以编辑消费者的答案:

 $(document).ready(function() { var string = document.location.pathname.replace('/Package Name/',''); $('ul.nav > li > a[href="' + string + '"]').parent().addClass('active'); } ); 

我尝试了一些上面的答案,它适用于“.active”类,但是链接不能正常工作,它仍然停留在当前页面上。 然后我试了这个:

 var url = window.location; // Will only work if string in href matches with location $('ul.nav a[href="' + url + '"]').parent().addClass('active'); // Will also work for relative and absolute hrefs $('ul.nav a').filter(function() { return this.href == url; }).parent().addClass('active'); 

我在这里find了它: Twitter Bootstrap将活跃的类添加到李

 <ul class="main-menu"> <li><a href="~/Cases/Index"><i class="fa fa-font fa-fw"></i><span class="text">Audit Case</span></a></li> <li><a href="~/Cases/Auditplan"><i class="fa fa-font fa-fw"></i><span class="text">Audit Plan</span></a></li> <li><a href="~/Cases/Auditreport"><i class="fa fa-font fa-fw"></i><span class="text">Audit Report</span></a></li> <li><a href="~/Cases/Company"><i class="fa fa-font fa-fw"></i><span class="text">Company Details</span></a></li> </ul> <script> $(function(){ $('.main-menu li > a[href="' + document.location.pathname + '"]').parent().addClass('active').siblings().removeClass('active'); }) </script> 

添加到您的JavaScript:

 $(".menu li").click(function(e) { $(".menu li").removeClass("active"); $(this).addClass("active"); e.preventDefault(); }); 

这个问题已经变得很老了,并且有了答案,但是我把最好的答案变得更好了。 顶部的答案只有在页面上有一个时才有效。 这个范围是从sibling元素中删除活动,并将其添加到您单击的元素。

我还添加了类nav-toggle以便它不会干扰已经有引导js连接的东西。

 $('.nav.nav-toggle li').click(function(e) { var $this = $(this); $this.siblings().removeClass('active'); if (!$this.hasClass('active')) { $this.addClass('active'); } e.preventDefault(); });