2

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

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

导航栏.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>
4

5 回答 5

6

使用 jQuery：

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

或者，将类添加到父元素 ( li)：

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

现场示例：

http://jsfiddle.net/BDTnj/

于 2013-05-08T17:33:53.803 回答
2

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

于 2013-11-22T14:46:17.277 回答
1

所以问题是导航栏内容作为单独的文件被加载到 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>
于 2013-05-08T19:27:54.763 回答
1

对于它的价值，我将 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]
于 2013-07-11T16:37:12.667 回答
-1

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

于 2013-07-11T18:44:59.333 回答