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

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

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' titlewww.jb51.net jQuery导航条点击后高亮显示/title脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/脚本样式# nav Li {左浮动：宽度： 80px文本对齐：中心；列表样式类型：无；} .nav-active { background : # ff 47 a5；} .nav-active a { color : # fff；text-decoration : none }/style/head dyul id=' nav ' Li class=' nav-active ' a href=' JavaScript :'rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow '首页/a/Li lia href=' JavaScript :'rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow '第1页/a/Li lia href=' JavaScript :'rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow '第2页/a/Li lia href=' JavaScript :'rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow '第3页/a/Li lia href=' JavaScript :'rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow '第4页/a/Li/ul脚本$(' # nav ').查找('里').单击(函数(){ //为当前点击的导航加上高亮，其余的移除高亮$(这个)。addClass('nav-active ').兄弟姐妹('里').移除CLaSS(' nav-active ')；});/脚本/正文/html使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码，运行效果如下：

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

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