选项卡js 改变图片的路径来实现点击和未点击的不同效果

上一章我介绍了用雪碧图的图片背景定位来实现选项卡选择，但是他对于图片的大小有严格的要求，必须是显示多大，你开始就得做多大的图片，如果图片很大，又不能缩小到我们想要的大小，否则就会虚。这时用上一章的内容就不能达到我们想要的效果了。因为雪碧图不能让他缩放了，否则就影响之后的背景定位了。这时我们只有现在用一张张的图片了。

、、基本的思路就是点击这个图片，这个图片变成选中的。其他就变成没选中的。

这四个图片没有选中时tab111，tab112，tab113，tab114.（11开头）

选中就是tab221，tab222，tab223，tab224（22开头）

html的内容就是下部选项卡有四个图片加文字组成的。

<nav class="mui-bar mui-bar-tab">

           <a class="mui-tab-item" href="billlist.html" >
                <img  src="img/tab111.png"id="0"/ >
                <span class="mui-badge" style="position:absolute;background-color:#DD524D;color:#fff;">0</span>
                <span class="mui-tab-label">接单</span>
            </a>
        
           <a class="mui-tab-item" href="checkmain.html">
                <img src="img/tab112.png"  id="1"  style="margin-right:2px;"/ >   <!--通过style来轻微调整一下位置-->
                <span class="mui-tab-label">检修</span>
            </a>
            
            <a class="mui-tab-item" href="bill.html" >
                <img src="img/tab113.png" id="2" style="margin-right:4px;"/>
                <span class="mui-tab-label">服务</span>
            </a>
            <a id="defaultTab" class="mui-tab-item mui-active" href="my.html" > <!-- 默认这个是选中的所以下面的图片也是22开头的-->
                <img  src="img/tab224.png"  id="3"/ >
                <span class="mui-tab-label">我的</span>
            </a>

        </nav>

现在开始写js

    mui('.mui-bar-tab').on('tap', 'a', function(e) {

     var id= $(this).children("img").attr("id");

         if(id=="0"){

                   $("#img1").attr("src","img/tab221.png");
                    $("#img2").attr("src","img/tab112.png");
                    $("#img3").attr("src","img/tab113.png");
                    $("#img4").attr("src","img/tab114.png")

   }else if(id==1){
                    $("#img1").attr("src","img/tab111.png");
                    $("#img2").attr("src","img/tab222.png");
                    $("#img3").attr("src","img/tab113.png");
                    $("#img4").attr("src","img/tab114.png");
                }else if(id==2){
                    $("#img1").attr("src","img/tab111.png");
                    $("#img2").attr("src","img/tab112.png");
                    $("#img3").attr("src","img/tab223.png");
                    $("#img4").attr("src","img/tab114.png");
                }else{
                    $("#img1").attr("src","img/tab111.png");
                    $("#img2").attr("src","img/tab112.png");
                    $("#img3").attr("src","img/tab113.png");
                    $("#img4").attr("src","img/tab224.png");
                }

   });

这是一种比较笨的方法，点击这个就改变这个，其他没点击的成没点击状态。感觉很多重复的代码。或者方法把它们写在for里面通过循环来找。把两组图片地址放在数组里面

var img1=["tab111.png","tab112.png","tab113.png","tab114.png"];
 var img2=["tab221.png","tab222.png","tab223.png","tab224.png"];
    
    mui(".mui-bar-tab").on("tap", "a", function(e) {
 
     var id= $(this).children("img").attr("id");  
      // alert(id+'0');
     for(var i=0;i<img1.length;i++){
       //如果是选择的那个，就换22的样式，    
         if(i==id){
            $(this).children("img").attr("src","images/"+img2[id]);
          }
         
         //否则用11的样式
         else {
 
             //console.log($("nav").find("a").innerHTML)
             $($("nav").find("a")[i]).find("img").attr("src","images/"+img1[i]);  //注意这个内容

         }
       }  
     
    });

来源：CSDN

作者：夏天想

链接：https://blog.csdn.net/qq_33769914/article/details/52700351