选项卡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",
bdbc
"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]);  //注意这个内容

         }

       }  

     

    });