В Bootstrap, как я могу определить «активный» навигационный элемент?

Я использую Twitter Bootstrap 3.0, используя плагин ScrollSpy, чтобы активировать мои «навигационные» ссылки при прокрутке вниз. Теперь я хочу автоматически обновлять URL-адрес в адресной строке (используя window.history.pushstate) в ответ на событие ScrollSpy «activate.bs.scrollspy».В Bootstrap, как я могу определить «активный» навигационный элемент?

Как я могу идентифицировать элемент «nav», который ScrollSpy активировал для меня?

Мой код выглядит примерно так.

<body data-spy="scroll" data-target="#primarynavbar"> 
    <div id="primarynavbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
... 
... 
     <li><a href="#contact">Contact Us</a></li> 
... 
... 
    <div id="contact" /> 
... 
... 
    <script> 
     $('#primarynavbar').on('activate.bs.scrollspy', function() { 
      window.history.pushstate('http://abcd.com#contact') 
     }); 
    </script> 
...

источник

2014-01-30 Boinst

Я предполагаю, что вы могли бы искать для активного класса, и получить ребенка анкеров HREF атрибута:

$('#primarynavbar').on('activate.bs.scrollspy', function() { 
    var hash = $(this).find("li.active a").attr("href"); 
    window.history.pushstate('http://abcd.com' + hash); 
});

источник

2014-01-30 02:35:38 dave

Бинго! Это сработало. – Boinst

Работает как очарование. Если у вас есть вложенное меню, вы хотите использовать текущий элемент подменю. Вот вам сутенерная версия вашего селектора: 'var hash = $ (this) .find (" li.active :last a "). Attr (" href ");' – kernel

В Bootstrap, как я могу определить «активный» навигационный элемент?

ответ

Смежные вопросы