期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

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,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册