jQuery Twitter Bootstrap 将活动类添加到 li
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11533542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap add active class to li
提问by 422
Using twitter bootstrap, and I need to initiate active class to the li portion of the main nav. Automagically. We use php not ruby.
使用 twitter bootstrap，我需要将活动类启动到主导航的 li 部分。自动。我们使用 php 而不是 ruby。
Sample nav :
示例导航：
<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 code is as follows:
引导代码如下：
<li class="active"><a href="/">Home</a></li>
So just need to figure out how to append the class active to the current page. Have looked thru nearly every answer on Stack, with no real joy.
所以只需要弄清楚如何将活动类附加到当前页面。几乎浏览了 Stack 上的所有答案，但没有真正的乐趣。
I had played with this:
我玩过这个：
/*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');
}
});
})
But no joy.
但是没有快乐。
采纳答案by 422
We managed to fix in the end:
我们最终设法修复：
/*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');
}
});
});
回答by Imtiaz
For Bootstrap 3:
对于引导程序 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
更新
For Bootstrap 4:
对于 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');
回答by Kam
You don't really need any JavaScript with Bootstrap:
你真的不需要任何带有 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>
To do more tasks after the menu item is selected you need JS as explained by other posts here.
要在选择菜单项后执行更多任务，您需要 JS，如此处其他帖子所述。
Hope this helps.
希望这可以帮助。
回答by user2045474
if you put
如果你把
data-toggle="pill"
in the tag it should work automatically.
在标签中它应该自动工作。
http://twitter.github.com/bootstrap/javascript.html#tabs
http://twitter.github.com/bootstrap/javascript.html#tabs
read under Markup
在标记下阅读
回答by Sebastian Viereck
This did the job for me including active main dropdowns and the active childrens(thanks to 422):
这为我完成了工作，包括活动的主下拉菜单和活动的孩子（感谢 422）：
$(document).ready(function () {
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').parent().parent().addClass('active');
});
回答by Oliver
If you are using an MVC framework with routes and actions:
如果您使用带有路由和操作的 MVC 框架：
$(document).ready(function () {
$('a[href="' + this.location.pathname + '"]').parent().addClass('active');
});
As illustrated in this answer by Christian Landgren: https://stackoverflow.com/a/13375529/101662
如 Christian Landgren 的回答所示：https://stackoverflow.com/a/13375529/101662
回答by Durga Prasad
Try this.
尝试这个。
// Remove active for all items.
$('.page-sidebar-menu li').removeClass('active');
// highlight submenu item
$('li a[href="' + this.location.pathname + '"]').parent().addClass('active');
// Highlight parent menu item.
$('ul a[href="' + this.location.pathname + '"]').parents('li').addClass('active');
回答by Ilker Cat
This works fine for me. It marks both simple nav elements and dropdown nav elements as active.
这对我来说很好用。它将简单导航元素和下拉导航元素标记为活动。
$(document).ready(function () {
var url = window.location;
$('ul.nav a[href="' + this.location.pathname + '"]').parent().addClass('active');
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().parent().parent().addClass('active');
});
Passing this.location.pathnameto $('ul.nav a[href="'...'"]')marks also simple nav elements. Passing urldid'nt work for me.
传递this.location.pathname给 $('ul.nav a[href="'...'"]')标记也是简单的导航元素。通过url对我不起作用。
回答by mvillegas
Just in case you are using Boostrap in Angulajs: this is a simple directive that works for me (because data-toggle cited by Kam is not included in Angular-ui). Hope can help.
以防万一您在 Angulajs 中使用 Boostrap：这是一个对我有用的简单指令（因为 Kam 引用的数据切换未包含在 Angular-ui 中）。希望能帮上忙。
app.directive("myDataToggle", function(){
function link(scope, element, attrs) {
var e = angular.element(element);
e.on('click', function(){
e.parent().parent().children().removeClass('active');
e.parent().addClass("active");
})
}
return {
restrict: 'A',
link: link
};
});
<ul class="nav nav-sidebar">
<li><a href="#/page1" my-data-toggle>Page1</a></li>
<li><a href="#/page2" my-data-toggle>Page2</a></li>
<li><a href="#/page3" my-data-toggle>Page3</a></li>
</ul>
回答by Filip Gjorgjevikj
The solution is simple and there is no need for server side or ajax, you only need jQuery and Bootstrap. On every page add an idto the bodytag. Use that idto find a tag that contains the page name (value of a tag).
解决方案很简单，不需要服务器端或ajax，只需要jQuery和Bootstrap。在每个页面上添加一个id到body标签。使用它id来查找包含页面名称（标签值）的标签。
Example:
例子：
page1.html
页面1.html
<body id="page1">
<ul class="nav navbar-nav">
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
</ul>
<script src="script.js"></script>
</body>
page2.html
page2.html
<body id="page2">
<ul class="nav navbar-nav">
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
</ul>
<script src="script.js"></script>
</body>
script.js
脚本.js
<script>
$(function () {
$("#page1 a:contains('Page1')").parent().addClass('active');
$("#page2 a:contains('Page2')").parent().addClass('active');
});
</script>
Big thanks to Ben! YouTube
非常感谢本！YouTube
