20
2019
01

jquery点击导航条栏改变背景颜色

刚在自己学习前端技术有个小伙伴儿问到这个问题,导航点击的时候进行红色背景和蓝色背景的切换,然后我就临时想到了一个解决方法,在这里记录一下吧,希望还有别的刚学习前端的小伙伴儿能用到,大神就请绕道咯!

<!DOCTYPE html>    
<html>    
<head>    
<meta charset="UTF-8">    
<title></title>    
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <body>
  <style>
*{ margin:0; padding:0; border:0px; list-style:none; margin:0 auto;}
*a { text-decoration:none; color:#FFF;}
ul { width:800px; height:30px; background-color:#C33;}
ul li { float:left; width:160px; height:30px; line-height:30px; text-align:center; color:#FFFFFF;}
ul li a { color:#FFFFFF; display:block; width:160px; height:30px; text-decoration:none;}
.first { background-color:#0000FF;}
ul li a:hover {color:#FFF; display:block; width:160px; height:30px; text-decoration: underline; background-color:#03F;}
</style>
<script type="text/javascript" src="../tu/jquery-1.11.3.min.js"></script>
<script language="javascript" type="text/javascript">
        $(document).ready(function (){
              $("li").each(function(index){
              $(this).click(function(){ 
              $("li").removeClass("first");
              $("li").eq(index).addClass("first");
             });
          });
         });
</script>
</head>
<body>
    <ul>
        <li class="first"><a href="#">首页</a></li>
        <li><a href="#">列表</a></li>
        <li><a href="#">内容</a></li>
        <li><a href="#">联系</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</body>
</html>
 </body>
</html>

效果点上面的(运行代码)来看,下面的是静态图片展示:

原文链接:https://www.qiquanji.com/post/7218.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。