Переключить активную вкладку с Navbar на Bootstrap

Question

Я использую навигационную панель Bootstrap для веб-сайта. Я разделил навигационную панель на собственную HTML-страницу. Когда какая-либо страница загружается, она загружает страницу navbar.html с помощью JQuery. Когда пользователь нажимает, например, на стр. 2, ссылка «Главная» по-прежнему отображается как активная, когда она должна быть «Страница 2».

Есть ли простой способ переключить класс для ссылки на страницу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> 

JQuery на page2

<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

Так что вопрос в том, что содержание Navbar был загружен в виде отдельного файла на стр.2 и .addClass был на page2. он не смог найти теги html. Для того, чтобы получить Navbar показать активную ссылку, я ставлю $('.nav a:contains("page2")').parent().addClass('active'); с моим кодом, чтобы загрузить Navbar:

PAGE2:

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

Answer 3

Для чего это стоит, я использую 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 4

в случае, если ваша серверная технология - asp.net-mvc, вы можете найти this answer полезно.

Answer 5

Используйте это: $('.nav a:contains("page2")').tab('show');