jq修改导航栏样式(选中使用两张图片替代的是否选中效果)
Posted zdzdbk
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jq修改导航栏样式(选中使用两张图片替代的是否选中效果)相关的知识,希望对你有一定的参考价值。
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修改导航栏样式(选中使用两张图片替代的是否选中效果)的主要内容,如果未能解决你的问题,请参考以下文章
elementUI的导航栏在刷新页面的时候选中状态消失的解决