twitter-bootstrap 使用 Bootstrap 的导航栏切换活动选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16446778/
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
Switch active tab with Bootstrap's Navbar
提问by thedeepfield
I'm using Bootstrap's navbar for a website. I've separated the navbar into its own HTML page. When any page is loaded, it will load the navbar.html page with JQuery. When a user clicks on say, page2, the "Home" link is still shown as active when it should be "Page2".
我正在为网站使用 Bootstrap 的导航栏。我已经将导航栏分成了它自己的 HTML 页面。当加载任何页面时，它将使用 JQuery 加载 navbar.html 页面。当用户单击例如第 2 页时，“主页”链接在应该为“第 2 页”时仍显示为活动状态。
Is there a simple way to switch the class for the page2 link to "active" using javascript, jquery or bootstrap magic?
有没有一种简单的方法可以使用 javascript、jquery 或 bootstrap 魔法将 page2 链接的类切换到“活动”？
navbar.html
导航栏.html
<ul class="nav">
<li class="active"><a href="#l">Home</a></li>
<li><a href="#">page2</a></li>
<li><a href="#">page3</a></li>
</ul>
jquery on page2
第 2 页上的 jquery
<script>
jQuery(function(){
$('#nav').load('nav.html');
});
jQuery(function(){
$('.nav a:contains("page2")').addClass('active');
});
</script>
回答by xandercoded
Using jQuery:
使用jQuery：
$('.nav a:contains("page2")').addClass('active');
Or, to add the class to the parent element (li):
或者，将类添加到父元素 ( li)：
$('.nav a:contains("page2")').parent().addClass('active');
Live Example:
现场示例：
回答by Ilya
Use this: $('.nav a:contains("page2")').tab('show');
用这个： $('.nav a:contains("page2")').tab('show');
回答by thedeepfield
So the issue was that the navbar content was being loaded as a separate file onto page2 and the .addClass was on page2. it could not find the html tags. In order to get the navbar to show the active link, I put $('.nav a:contains("page2")').parent().addClass('active');with my code to load the navbar:
所以问题是导航栏内容作为单独的文件加载到 page2 上，而 .addClass 位于 page2 上。它找不到 html 标签。为了让导航栏显示活动链接，我$('.nav a:contains("page2")').parent().addClass('active');使用了我的代码来加载导航栏：
Page2:
第2页：
<script>
jQuery(function(){
$('#nav').load('nav.html', function() {
$('.nav a:contains("Home")').parent().addClass('active');
})
});
</script>
回答by Greg Swindle
For what it's worth, I'm using Backbone with Bootstrap, and here's my solution (with variables renamed for clarity):
就其价值而言，我将 Backbone 与 Bootstrap 一起使用，这是我的解决方案（为了清晰起见，变量已重命名）：
var AppRouter = Backbone.Router.extend({
routes: {
'': 'list',
'menu-items/new': 'itemForm',
'menu-items/:item': 'itemDetails',
'orders': 'orderItem',
'orders/:item': 'orderItem'
},
initialize: function () {
// [snip]
this.firstView = new FirstView();
this.secondView = new SecondView();
this.thirdView = new ThirdView();
this.navMenu = {
firstViewMenuItem: $('li#first-menu-item'),
secondViewMenuItem: $('li#second-menu-item'),
thirdViewMenuItem: $('li#third-menu-item'),
reset: function() {
_.each(this, function(menuItem) {
if (!_.isFunction(menuItem) && menuItem.hasClass('active')) {
menuItem.removeClass('active');
return true;
}
});
return this;
}
};
},
// [snip]
Within my router callbacks, I remove any existing 'active' menu classes and set the selected to 'active', e.g.,
在我的路由器回调中，我删除了任何现有的“活动”菜单类并将选定的设置为“活动”，例如，
// [snip]
list: function () {
$('#app').html(this.firstView.render().el);
this.navMenu.reset().firstViewMenuItem.addClass('active');
},
// [snip]
回答by Dmitry Efimenko
in case your server side technology is asp.net-mvc, you might find this answeruseful.
如果您的服务器端技术是asp.net-mvc，您可能会发现此答案很有用。
