Twitter Bootstrap将活动类添加到li
Twitter Bootstrap将活动类添加到li
提问于 2012-07-18 10:35:58
使用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');
}
});
})但并不快乐。
回答 11
Stack Overflow用户
回答已采纳
发布于 2012-07-18 18:32:57
我们最终解决了这个问题：
/*menu handler*/
$(function(){
function stripTrailingSlash(str) {
if(str.substr(-1) == '/') {
return str.substr(0, str.length - 1);
}
return str;
}
var url = window.location.pathname;
var activePage = stripTrailingSlash(url);
$('.nav li a').each(function(){
var currentPage = stripTrailingSlash($(this).attr('href'));
if (activePage == currentPage) {
$(this).parent().addClass('active');
}
});
});Stack Overflow用户
发布于 2013-05-17 04:44:58
使用Bootstrap时，您实际上不需要任何JavaScript：
<ul class="nav">
<li><a data-target="#" data-toggle="pill" href="#accounts">Accounts</a></li>
<li><a data-target="#" data-toggle="pill" href="#users">Users</a></li>
</ul>要在选择菜单项后执行更多任务，您需要JS，这里的其他帖子解释了这一点。
希望这能有所帮助。
Stack Overflow用户
发布于 2013-02-13 05:02:42
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11533542
复制相关文章
相似问题