Как в Bootstrap определить активный элемент навигации?

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

Как я могу идентифицировать элемент "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>
...

javascript twitter-bootstrap scrollspy
person Boinst    schedule 30.01.2014    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Я бы предположил, что вы можете найти активный класс и получить атрибут href дочерних якорей:

$('#primarynavbar').on('activate.bs.scrollspy', function () {
   var hash = $(this).find("li.active a").attr("href");
   window.history.pushstate('http://abcd.com' + hash);
});
person dave    schedule 30.01.2014
comment
Работает как шарм. Если у вас есть вложенное меню, вы захотите использовать текущий элемент подменю. Вот упрощенная версия вашего селектора для этого: var hash = $(this).find("li.active:last a").attr("href"); - person kernel; 06.01.2015