猿问

点击导航后,当前导航的颜色变色

http://www.imooc.com/wenda/save

就跟慕课网这个网址的头部导航一样,点击某个菜单后,该菜单的背景色变为灰色,能否讲下这个效果的原理,或者有源码就更好啦,谢谢各位大神啦~

liujiachang
浏览 3280回答 4
4回答

blovetu

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>Document</title>     <style>         nav ul {             padding: 0;             list-style: none;         }         nav ul li {             text-decoration: none;             width: 70px;line-height: 50px;             text-align: center;             float: left;             background-color: #000;             color: #fff;             cursor: pointer;}         .gray {background-color: rgba(0,0,0,0.6);}     </style> </head> <body>     <nav>         <ul>             <li>首页</li>             <li>实战</li>             <li>路径</li>             <li>猿问</li>             <li>手记</li>         </ul>     </nav>     <script type="text/javascript">         $("nav li").click(function(){             $(this).addClass("gray").siblings().removeClass("gray");         })     </script> </body> </html>$("nav li").click(function(){     $(this).addClass("gray").siblings().removeClass("gray"); })一句搞定自己引一个jQuery库就行
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答