• 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>
  • 相关阅读:
    Codeforces 1132D
    Codeforces 670F
    Codeforces 670E
    Codeforces 670E
    Codeforces 670E
    Codeforces 670
    Codeforces 1138
    Codeforces 1114E
    力扣21.合并两个有序链表
    力扣538.把二叉树转换为累加树
  • 原文地址:https://www.cnblogs.com/zdzdbk/p/10195192.html
Copyright © 2020-2023  润新知