jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017-07-19 10:39
796 查看
本文实例讲述了jQuery实现导航栏头部菜单项点击后变换颜色的方法。分享给大家供大家参考,具体如下:
实现效果如下:
话不多说直接上代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a{ text-decoration: none; color: black; } #menu{ width: 100%; height: 20px; background: gainsboro; } ul li{ list-style: none; float: left; padding-left: 20px; background-color: whitesmoke; } .active { color: white; background-color: black; } .none { background-color: whitesmoke; } </style> </head> <body> <ul id="menu"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >直播</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新闻</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >关于</a></li> </ul> <script src="jquery-1.7.2.min.js"></script> <script> $('#menu li a').click(function () { var f = this; $('#menu li a').each(function () { this.className = this == f ? 'active' : 'none' }); }); </script> </body> </html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- jquery实现导航栏头部点击变换颜色
- jquery实现点击变换导航样式的方法
- jquery实现点击变换导航样式的方法
- 方便的选中记录方法(交替项颜色变换):点击DataGrid的一条记录,则选中此记录。
- jQuery 关于点击菜单项,使子条目"向上"展开效果的实现
- jquery修改网页背景颜色通过css方法实现
- js鼠标点击图片实现随机变换图片的方法
- JQuery怎么实现页面刷新后保留鼠标点击样式的方法
- jQuery实现表格颜色交替显示的方法
- js实现点击按钮后给Div图层设置随机背景颜色的方法
- wordpress和jquery实现点击加载更多文章的详细方法
- jquery实现导航栏鼠标点击后实行背景高亮,点击离开恢复(超级简单!!!!)
- JQuery实现动态适时改变字体颜色的方法
- jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
- jquery 点击某行变换背景颜色,其他行还原为原来颜色
- jQuery点击tr实现checkbox选中的方法
- Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
- jQuery实现鼠标滑过Div层背景变颜色的方法
- Jquery 实现表格颜色交替变化,点击选中行,鼠标移过颜色变化。