开关激活的标签与引导的导航栏

问题描述：

我使用的是引导的导航栏的网站。我已经将导航栏分成了自己的HTML页面。当加载任何页面时，它将使用JQuery加载navbar.html页面。当用户点击第2页时，当“Home”链接应该是“Page2”时，它仍然显示为活动状态。开关激活的标签与引导的导航栏

有没有一种简单的方法来切换类的第2页到“主动”使用JavaScript和jQuery或引导魔法？

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>

Page2上

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

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

答

的jQuery使用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 2013-05-08 17:48:44

@thedeepfield我更新我的答案，在'了'和'之间有一个错误的空间。可能是因为我的导航栏是从一个单独的html文件加载的？ – xandercoded 2013-05-08 17:50:17

它不是为我工作：没有成功.. – thedeepfield 2013-05-08 17:57:11

答

所以，问题是，导航栏的内容被加载作为一个单独的文件到2页和.addClass是在第2页。它找不到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>

答

对于它的价值，我使用的骨干与引导，并这里是我的解决方案（与变量改名为清楚起见）：

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]

答

的情况下，你的服务器端技术是asp.net-mvc，你可能会发现this answer有用。

答

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

开关激活的标签与引导的导航栏

相关推荐