jq修改导航栏样式（选中、使用两张图片替代的是否选中效果）
生活随笔
收集整理的這篇文章主要介紹了
jq修改导航栏样式（选中、使用两张图片替代的是否选中效果）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1 <footer class="toolbar">
2 <ul>
3 <li>
4 <a href="{:url('Index/home')}">
5 <img src="__STATIC__/img/f1.png" alt="">
6 <span>首頁</span>
7 </a>
8 </li>
9 <li>
10 <a href="{:url('Goods/category_list')}">
11 <img src="__STATIC__/img/f2.png" alt="">
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" alt="">
18 </a>
19 </li>
20 <li>
21 <a href="{:url('Cart/cart_list')}">
22 <img src="__STATIC__/img/f4.png" alt="">
23 <span>購物車</span>
24 </a>
25 </li>
26 <li>
27 <a href="{:url('Ucenter/my_home')}">
28 <img src="__STATIC__/img/f5.png" alt="">
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>
?
轉載于:https://www.cnblogs.com/zdzdbk/p/10195192.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的jq修改导航栏样式（选中、使用两张图片替代的是否选中效果）的全部內容，希望文章能夠幫你解決所遇到的問題。
