使用 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>
Bootstrap 代码如下:
<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');
}
});
})
但没有喜悦。
最佳答案
对于 Bootstrap 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');
更新
对于 Bootstrap 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');
关于jquery - Twitter Bootstrap 将事件类添加到 li,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11533542/