活动导航锚链接

Active Navigation Anchor Links

本文关键字:链接 导航 活动      更新时间:2023-09-26

我已经在这里和谷歌上做了一个搜索,我已经尝试了他们给我的所有代码,没有一个成功。我完全不知道为什么它们不起作用。基本上,当你滚动页面并到达锚链接"about"时,我希望"about"被高亮显示,直到你到达"events"等。

<div id="menu-wrapper">
    <div id="menu">
            <ul>
            <li class="logo"><a href="#home"><img src="/images/ccky_logo.png" height="60"/></a></li>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#events">Events</a></li>
            <li><a href="#team">Team</a></li>
            <li><a href="#location">Location</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>
    <!-- end #menu -->
</div>

谢谢!

您可以使用bootstrap的Scrollspy来实现此效果:http://twitter.github.io/bootstrap/javascript.html#scrollspy

实现JavaScript插件后,只需使用$('#menu').scrollspy()调用它。

在您的HTML中,只需添加数据参数bootstrap指示您使用。

相关文章: