使用 twitter bootstrap,我需要启动主导航的 li 部分的活动类。自动地。
我们使用 php 而不是 ruby。
示例导航:
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="/forums">Forums</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/faqs.php">FAQ's</a></li>
<li><a href="/item.php">Item</a></li>
<li><a href="/create.php">Create</a></li>
</ul>
引导程序代码如下:
<li class="active"><a href="/">Home</a></li>
所以只需要弄清楚如何将活动类附加到当前页面。几乎浏览了 Stack 上的所有答案,但没有真正的乐趣。
我玩过这个:
/*menu handler*/
$(function(){
var url = window.location.pathname;
var activePage = url.substring(url.lastIndexOf('/')+1);
$('.nav li a').each(function(){
var currentPage = this.href.substring(this.href.lastIndexOf('/')+1);
if (activePage == currentPage) {
$(this).parent().addClass('active');
}
});
})
但没有喜悦。
对于引导程序 3:
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');
Update
对于引导程序 4:
var url = window.location;
// Will only work if string in href matches with location
$('ul.navbar-nav a[href="'+ url +'"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.navbar-nav a').filter(function() {
return this.href == url;
}).parent().addClass('active');
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)