jQuery案例（底部导航图片切换）

Posted 2020-11-04 陪伴者

        作为一个代码新手，最近我又学习了一些jQuery的相关知识，所以今天就做了一个小案例。如下：

 

                  

 

        通过点击图标切换并点亮图标，现在我们就开始做吧 ,首先说一下思路：     

       我是通过事件委托的方式做的，大致思路就是把所有的图片变成未选中的状态，然后点击图片触发状态，点击事件结束。

       就是通过修改路径名实现图片的替换，取相同的地方和不同的地方划分成两部分，图片是根据路径及图片名字显示的，

       通过修改图片后一部分的内容，也就实现了图片的切换。

 

                

 

        一，现做一个简单的布局，这个就不细说了

               

 <ul  id="bottom">
      <li class="activeClass" index="1">
           <img src="img/nav_init_1.jpg">
           <span>首页</span>
      </li>
      <li index="2">
          <img src="img/nav_init_2.jpg">
          <span>金融</span>
      </li>
      <li index="3">
          <img src="img/nav_init_3.jpg">
          <span>生活</span>
      </li>
      <li index="4">
          <img src="img/nav_init_4.jpg">
          <span>健康</span>
      </li>
      <li index="5">
           <img src="img/nav_init_5.jpg">
           <span>我的</span>
      </li>
 </ul>

   

    二，接着开始实现jq功能（前提：要引入jq文件）

          这个分为两步：

                   第一步：把全部路径图片变成灰色

                   第二步：帮当前点击的图标点亮  

$(\'ul\').on("click","li",function(event){ 
          //事件委托      
          var preindex=$("li.activeClass").attr("index");
           // console.log(preindex);
          //字体变颜色
  
 $(this).addClass("activeClass").siblings().removeClass("activeClass");

           if(event.target.tagName === \'IMG\'){

                var nodes = $(\'#bottom li img\');
                // console.log(nodes);

                for(var i=0; i<nodes.length; i++){
                  //把所有的路径全部变成未选中的图标
                    nodes[i].src = nodes[i].src.replace(/.jpg|_selected.jpg/,\'.jpg\');
                }

                event.target.src = event.target.src.replace(/.jpg|_selected.jpg/,\'_selected.jpg\');
            }}
    )

 

        三：最终实现效果

              

                                                                                                                                                                                                                                -- -- END