底部tabbar切换+icon高亮

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
       <title>底部tabbar切换</title>
       <style>
           *{
               margin: 0;
               padding: 0;
               text-decoration: none;
               list-style: none;
           }
           .foot {
               width: 100%;
               height: 60px;
               background: #FFFFFF;
               position: fixed;
               bottom: 0;
               display: flex;
               justify-content: space-around;
           }

           .foot li {
               height: 100%;
           }

           .foot li a {
               display: block;
               width: 100%;
               height: 100%;
           }

           .foot li a img {
               display: block;
               width: 38px;
               height: 38px;
           }

           .foot li a p {
               font-size: 12px;
               width: 100%;
               text-align: center;
           }

           p.actives {
               color: #35bed1;
           }
       </style>
   </head>

   <body>
       
       <ul class="foot">
           <li class="Imgbox" img="../img/icon.png" data-img="../img/icon_select.png">
               <a href="##">
                   <img src="../img/icon.png" />
                   <p class="actives">首页</p>
               </a>
           </li>
           <li class="Imgbox" img="../img/icon1.png" data-img="../img/icon_select1.png">
               <a href="##">
                   <img src="../img/icon1.png" />
                   <p>学习</p>
               </a>
           </li>
           <li class="Imgbox" img="../img/icon2.png" data-img="../img/icon_select2.png">
               <a href="##">
                   <img src="../img/icon2.png" />
                   <p>我的</p>
               </a>
           </li>
       </ul>
   </body>
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script type="text/javascript">
       $('.foot li').click(function() {
           $(this).find("p").addClass('actives');
           $(this).siblings(".Imgbox").find("p").removeClass('actives');

           var click = $(this).data('img');
           $(this).find('img').attr('src', click);

           $(this).siblings('.Imgbox').each(function() {
               var noclick = $(this).attr('img');
               $(this).find('img').attr('src', noclick);
           })
       })
   </script>
</html>

图片的话 img为未选中图片 data-img为选中图片这个图片要换成自己使用的图片，复制代码就可以使用

底部tabbar切换+icon高亮

猜你喜欢