jquery怎么实现京东侧边栏导航效果

这篇文章主要介绍"jquery怎么实现京东侧边栏导航效果"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"jquery怎么实现京东侧边栏导航效果"文章能帮助大家解决问题。

样式代码

jQuery代码

这里把图片的名称换成数字的，每一个图标都有两个图片， 一个白色和一个绿色的，当鼠标移动到其中一个图标处时，改变其图片使其变色，因为一共有八个图标，所以总共有16张图片。因此图片名改变为当前图片名称数字+8。

这里用的动态是slideDown与slideUp。需要注意的是要设置索引来寻找但前对象的位置（因为是在for循环里有了索引才能找到当前对象的图片的数字名称）。

布局代码

 
  
             
      我的订单     
 
  
             
      我的收藏     
 
    
               
         我的优惠券        
   
    
                
          我的足迹          
   
      
                
           我的JImu           
    
  
           
     
购
     
物
     
车
     
0
    
           
   
               
          
微信扫码享优惠       
   
  
              
         加关注       
 
        

效果图：

关于"jquery怎么实现京东侧边栏导航效果"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。