使用 Bootstrap 导航栏切换活动选项卡答案

【问题标题】：Switch active tab with Bootstrap's Navbar使用 Bootstrap 导航栏切换活动选项卡
【发布时间】：2013-05-08 17:31:48
【问题描述】：

我正在将 Bootstrap 的导航栏用于网站。我已经将导航栏分成了它自己的 HTML 页面。加载任何页面时，它将使用 JQuery 加载 navbar.html 页面。当用户点击页面 2 时，“主页”链接仍然显示为活动的，而它应该是“页面 2”。

有没有一种简单的方法可以使用 javascript、jquery 或 bootstrap magic 将 page2 链接的类切换为“活动”？

navbar.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>

第 2 页上的 jquery

<script>
    jQuery(function(){
        $('#nav').load('nav.html');
    });

    jQuery(function(){
        $('.nav a:contains("page2")').addClass('active');
    });
</script>

【问题讨论】：

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

使用 jQuery：

$('.nav a:contains("page2")').addClass('active');

或者，将类添加到父元素（li）：

$('.nav a:contains("page2")').parent().addClass('active');

实例：

http://jsfiddle.net/BDTnj/

【讨论】：

我将它添加到第 2 页，但它不起作用。我也试过 $(".nav li:contains('page2')").addClass("active");没有成功..
@thedeepfield 我更新了我的答案，在 a 和 : 之间有一个错误的空格 ...
它对我不起作用。可能是因为我的导航栏是从单独的 html 文件加载的吗？
当我将代码放入 nav.html 时它可以工作。所以这与我的导航加载与页面分离有关。
@thedeepfield 看看我的例子，代码在那里并且可以工作。确保您在正确的时间/事件执行它，例如 jQuery.ready

【解决方案2】：

使用这个：$('.nav a:contains("page2")').tab('show');

【讨论】：

【解决方案3】：

所以问题是导航栏内容作为单独的文件加载到 page2 上，而 .addClass 在 page2 上。它找不到 html 标签。为了让导航栏显示活动链接，我将$('.nav a:contains("page2")').parent().addClass('active'); 与我的代码一起用于加载导航栏：

第2页：

<script>
jQuery(function(){
    $('#nav').load('nav.html', function() {
        $('.nav a:contains("Home")').parent().addClass('active');
    })
});
</script>

【讨论】：

【解决方案4】：

对于它的价值，我正在使用带有 Bootstrap 的 Backbone，这是我的解决方案（为清楚起见，将变量重命名）：

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]

在我的路由器回调中，我删除了所有现有的“活动”菜单类并将选定的菜单类设置为“活动”，例如，

// [snip]
list: function () {
    $('#app').html(this.firstView.render().el);
    this.navMenu.reset().firstViewMenuItem.addClass('active');
},
// [snip]

【讨论】：

【解决方案5】：

如果您的服务器端技术是 asp.net-mvc，您可能会发现 this answer 很有用。

【讨论】：