)。锚标记定义导航链接,并且可以选择包含当前活动项目的 aria-current="page" 属性。<code class="html"><ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact</a></li>
</ul></code>
登录后复制
CSS
CSS 定义导航菜单的样式。确保活动类正确应用于当前活动项。
<code class="css">.menu {
list-style: none;
}
.menu > li {
float: left;
}
.menu > li > a {
color: #555;
float: none;
padding: 10px 16px 11px;
display: block;
}
.menu > li > a:hover {
color: #F95700;
}
.menu a[aria-current="page"],
.menu a[aria-current="page"]:hover {
color: #F95700;
}</code>
登录后复制
JavaScript
要激活导航链接并切换活动类,请实现 jQuery事件处理程序:
<code class="javascript">$('.navbar li').click(function(e) {
$('.navbar li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});</code>
登录后复制