点击导航高亮 html,jQuery实现的导航条点击后高亮显示功能示例

本文实例讲述了jQuery实现的导航条点击后高亮显示功能。分享给大家供大家参考，具体如下：

www.jb51.net jQuery导航条点击后高亮显示

#nav li {float: left; width: 80px; text-align: center; list-style-type: none;}

.nav-active {background: #ff47a5;}

.nav-active a {color: #fff;text- decoration:none}

• 首页
• Page1
• Page2
• Page3
• Page4

$('#nav').find('li').click(function() {

// 为当前点击的导航加上高亮，其余的移除高亮

$(this).addClass('nav-active').siblings('li').removeClass('nav-active');

});

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，运行效果如下：

希望本文所述对大家jQuery程序设计有所帮助。