Question

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

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

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>

Answer 1

使用jQuery：

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

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

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

直播示例：

http://jsfiddle.net/BDTnj/

Answer 2

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

Answer 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>

Answer 4

对于它的价值，我使用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]

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

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

Answer 5

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

使用Bootstrap Navbar切换活动选项卡

5 个答案: