在Bootstrap中,如何识别“活动”导航元素?

时间:2014-01-30 02:26:40

标签: javascript twitter-bootstrap scrollspy

我正在使用Twitter Bootstrap 3.0,在我向下滚动时使用ScrollSpy插件激活我的“nav”链接。现在我想自动更新地址栏中的URL(使用window.history.pushstate)以响应ScrollSpy事件“activate.bs.scrollspy”。

如何识别ScrollSpy为我激活的“nav”元素?

我的代码看起来像这样。

<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>
...

1 个答案:

答案 0 :(得分:4)

我认为您可以查找活动类,并获取子锚点href属性:

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