本文实例讲述了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}
$('#nav').find('li').click(function() {
// 为当前点击的导航加上高亮,其余的移除高亮
$(this).addClass('nav-active').siblings('li').removeClass('nav-active');
});
使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码,运行效果如下:
希望本文所述对大家jQuery程序设计有所帮助。