В Bootstrap, как мога да идентифицирам активния навигационен елемент?

Използвам Twitter Bootstrap 3.0, като използвам плъгина ScrollSpy, за да активирам моите връзки за „навигация“, докато превъртам надолу. Сега искам автоматично да актуализирам 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="/bg#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