码迷,mamicode.com
首页 > 其他好文 > 详细

jq修改导航栏样式(选中、使用两张图片替代的是否选中效果)

时间:2018-12-29 13:39:24      阅读:288      评论:0      收藏:0      [点我收藏+]

标签:修改   location   src   ati   png   car   function   ucenter   var   

 1 <footer class="toolbar">
 2     <ul>
 3         <li>
 4                <a href="{:url(‘Index/home‘)}">
 5                 <img src="__STATIC__/img/f1.png" >
 6                 <span>首页</span>
 7             </a>
 8         </li>
 9         <li>
10             <a href="{:url(‘Goods/category_list‘)}">
11                 <img src="__STATIC__/img/f2.png" >
12                 <span>分类</span>
13             </a>
14         </li>
15         <li class="vip_img">
16             <a href="{:url(‘Gift/gift_mall‘)}">
17                 <img src="__STATIC__/img/f3.png" >
18             </a>
19         </li>
20         <li>
21             <a href="{:url(‘Cart/cart_list‘)}">
22                 <img src="__STATIC__/img/f4.png" >
23                 <span>购物车</span>
24             </a>
25         </li>
26         <li>
27             <a href="{:url(‘Ucenter/my_home‘)}">
28                 <img src="__STATIC__/img/f5.png" >
29                 <span>我的</span>
30             </a>
31         </li>
32     </ul>
33 </footer>
34 
35 <script type="text/javascript">
36 $(function(){
37     var navLi=$(‘.toolbar li‘) //此处填写你的导航html对象
38     var windowUrl=window.location.href; //获取当前url链接
39     navLi.each(function(){ //遍历获取到的url
40         var t=$(this).find(‘a‘).attr(‘href‘);//获取遍历的url地址
41         if(t==windowUrl.replace(/^http:\/\/[^/]+/, "")){ //去掉域名
42             var src = $(this).find(‘img‘).attr(‘src‘).replace(/.png/, "y.png"); //获取新的地址
43             $(this).find(‘img‘).attr(‘src‘,src); //替换地址
44         }
45     })
46 })
47 </script>

 

jq修改导航栏样式(选中、使用两张图片替代的是否选中效果)

标签:修改   location   src   ati   png   car   function   ucenter   var   

原文地址:https://www.cnblogs.com/zdzdbk/p/10195192.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!