首页>>导航菜单>>jQuery仿天猫商品分类导航菜单切换代码(2018-08-23)

jQuery仿天猫商品分类导航菜单切换代码

jQuery仿天猫商品分类导航菜单切换代码
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="containor">  
  2.     <div class="nav_left">  
  3.         <ul>  
  4.             <li data-id="1"> <span>美妆/个人护理</span></li>  
  5.             <li data-id="2"> <span>手机 /数码 /电脑办公</span></li>  
  6.             <li data-id="3"> <span>零食 /茶酒 /进口食品 </span></li>  
  7.             <li data-id="4"> <span>母婴玩具 </span></li>  
  8.             <li data-id="5"> <span>腕表 /眼镜 /珠宝饰品 </span></li>  
  9.             <li data-id="6"> <span>大家电 /生活电器 </span></li>  
  10.             <li data-id="7"> <span>厨具 /收纳 /宠物  </span></li>  
  11.             <li data-id="8"> <span>汽车 /配件 /用品  </span></li>  
  12.             <li data-id="9"> <span>生鲜水果  </span></li>  
  13.             <li data-id="10"> <span>家纺 /家饰 /鲜花   </span></li>  
  14.         </ul>  
  15.     </div>  
  16.     <div class="nav_right">  
  17.         <div class="sub hide" data-id="1">  
  18.             <dl>  
  19.                 <dt><a >护肤品 <i> ></i></a> </dt>  
  20.                 <dd>  
  21.                     <a>官方直售</a>  
  22.                     <a>面膜</a>  
  23.                     <a>护肤套装</a>  
  24.                     <a>乳液面霜</a>  
  25.                     <a>精华液</a>  
  26.                     <a>官方直售</a>  
  27.                     <a>面膜</a>  
  28.                     <a>护肤套装</a>  
  29.                     <a>乳液面霜</a>  
  30.                     <a>精华液</a>  
  31.                     <a>官方直售</a>  
  32.                     <a>面膜</a>  
  33.                     <a>护肤套装</a>  
  34.                     <a>乳液面霜</a>  
  35.                     <a>精华液</a>  
  36.                 </dd>  
  37.                   
  38.             </dl>  
  39.                 <dl>  
  40.                 <dt><a >彩妆 <i> ></i></a> </dt>  
  41.                 <dd>  
  42.                     <a>时尚彩妆</a>  
  43.                     <a>香水</a>  
  44.                     <a>气垫护肤</a>  
  45.                     <a>BB霜</a>  
  46.                     <a>口红</a>  
  47.                     <a>隔离</a>  
  48.                 <a>粉底</a>  
  49.                     <a>粉饼</a>  
  50.                 </dd>  
  51.                   
  52.             </dl>  
  53.                 <dl>  
  54.                 <dt><a >男士护肤 <i> ></i></a> </dt>  
  55.                 <dd>  
  56.                     <a>洁面爽</a>  
  57.                     <a>面膜</a>  
  58.                     <a>护肤套装</a>  
  59.                     <a>肤水乳液/面霜</a>  
  60.                     <a>精华液</a>  
  61.                     <a>眼部护理</a>  
  62.                     <a>面膜</a>  
  63.                     <a>唇部护理</a>  
  64.                     <a>防晒</a>  
  65.                     <a>精华液</a>  
  66.                     <a>T区护理控油</a>  
  67.                       
  68.                 </dd>  
  69.                   
  70.             </dl>  
  71. <dl>  
  72.                 <dt><a >护肤品 <i> ></i></a> </dt>  
  73.                 <dd>  
  74.                     <a>官方直售</a>  
  75.                     <a>面膜</a>  
  76.                     <a>护肤套装</a>  
  77.                     <a>乳液面霜</a>  
  78.                     <a>精华液</a>  
  79.                     <a>官方直售</a>  
  80.                     <a>面膜</a>  
  81.                     <a>护肤套装</a>  
  82.                     <a>乳液面霜</a>  
  83.                     <a>精华液</a>  
  84.                     <a>官方直售</a>  
  85.                     <a>面膜</a>  
  86.                     <a>护肤套装</a>  
  87.                     <a>乳液面霜</a>  
  88.                     <a>精华液</a>  
  89.                 </dd>  
  90.                   
  91.             </dl>  
  92.                 <dl>  
  93.                 <dt><a >彩妆 <i> ></i></a> </dt>  
  94.                 <dd>  
  95.                     <a>时尚彩妆</a>  
  96.                     <a>香水</a>  
  97.                     <a>气垫护肤</a>  
  98.                     <a>BB霜</a>  
  99.                     <a>口红</a>  
  100.                     <a>隔离</a>  
  101.                 <a>粉底</a>  
  102.                     <a>粉饼</a>  
  103.                 </dd>  
  104.                   
  105.             </dl>  
  106.                 <dl>  
  107.                 <dt><a >男士护肤 <i> ></i></a> </dt>  
  108.                 <dd>  
  109.                     <a>洁面爽</a>  
  110.                     <a>面膜</a>  
  111.                     <a>护肤套装</a>  
  112.                     <a>肤水乳液/面霜</a>  
  113.                     <a>精华液</a>  
  114.                     <a>眼部护理</a>  
  115.                     <a>面膜</a>  
  116.                     <a>唇部护理</a>  
  117.                     <a>防晒</a>  
  118.                     <a>精华液</a>  
  119.                     <a>T区护理控油</a>  
  120.                       
  121.                 </dd>  
  122.                   
  123.             </dl>  
  124.             <dl>  
  125.                 <dt><a >男士护肤 <i> ></i></a> </dt>  
  126.                 <dd>  
  127.                     <a>洁面爽</a>  
  128.                     <a>面膜</a>  
  129.                     <a>护肤套装</a>  
  130.                     <a>肤水乳液/面霜</a>  
  131.                     <a>精华液</a>  
  132.                     <a>眼部护理</a>  
  133.                     <a>面膜</a>  
  134.                     <a>唇部护理</a>  
  135.                     <a>防晒</a>  
  136.                     <a>精华液</a>  
  137.                     <a>T区护理控油</a>  
  138.                       
  139.                 </dd>  
  140.                   
  141.             </dl>  
  142.         </div>  
  143.   
  144.         <div class="sub hide" data-id="2">  
  145.             <dl>  
  146.                 <dt><a >电脑办公 <i> ></i></a> </dt>  
  147.                 <dd>  
  148.                     <a>官方直售</a>  
  149.                     <a>面膜</a>  
  150.                     <a>护肤套装</a>  
  151.                     <a>乳液面霜</a>  
  152.                     <a>精华液</a>  
  153.                     <a>官方直售</a>  
  154.                     <a>面膜</a>  
  155.                     <a>护肤套装</a>  
  156.                     <a>乳液面霜</a>  
  157.                     <a>精华液</a>  
  158.                     <a>官方直售</a>  
  159.                     <a>面膜</a>  
  160.                     <a>护肤套装</a>  
  161.                     <a>乳液面霜</a>  
  162.                     <a>精华液</a>  
  163.                 </dd>  
  164.             </dl>  
  165.   
  166.         </div>  
  167.   
  168.         <div class="sub hide" data-id="3">  
  169.             <dl>  
  170.                 <dt><a >进口食品 <i> ></i></a> </dt>  
  171.                 <dd>  
  172.                     <a>官方直售</a>  
  173.                     <a>饼干</a>  
  174.                     <a>海苔</a>  
  175.                     <a>火腿肠</a>  
  176.                     <a>方便面</a>  
  177.                     <a>果冻</a>  
  178.                     <a>水果干</a>  
  179.                     <a>坚果</a>  
  180.                     <a>面包蛋糕</a>  
  181.                     <a>华夫饼</a>  
  182.                     <a>进口巧克力</a>  
  183.                     <a>进口咖啡</a>  
  184.                     <a>进口葡萄酒</a>  
  185.                     <a>啤酒饮料</a>  
  186.                 </dd>  
  187.             </dl>  
  188.   
  189.         </div>  
  190.         <div class="sub hide" data-id="4">  
  191.             <dl>  
  192.                 <dt><a >母婴玩具 <i> ></i></a> </dt>  
  193.                 <dd>  
  194.                     <a>童装</a>  
  195.                     <a>秋换新</a>  
  196.                     <a>商场同款</a>  
  197.                     <a>特价优惠</a>  
  198.                     <a>秋衣秋裤</a>  
  199.                     <a>外套</a>  
  200.                     <a>羽绒服</a>  
  201.                     <a>夹克</a>  
  202.                     <a>连衣裙</a>  
  203.                     <a>裤子</a>  
  204.   
  205.                 </dd>  
  206.             </dl>  
  207.   
  208.         </div>  
  209.         <div class="sub hide" data-id="5">  
  210.             <dl>  
  211.                 <dt><a >珠宝饰品 <i> ></i></a> </dt>  
  212.                 <dd>  
  213.                     <a>官方直售</a>  
  214.                     <a>面膜</a>  
  215.                     <a>护肤套装</a>  
  216.                     <a>乳液面霜</a>  
  217.                     <a>精华液</a>  
  218.                     <a>官方直售</a>  
  219.                     <a>面膜</a>  
  220.                     <a>护肤套装</a>  
  221.                     <a>乳液面霜</a>  
  222.                     <a>精华液</a>  
  223.                     <a>官方直售</a>  
  224.                     <a>面膜</a>  
  225.                     <a>护肤套装</a>  
  226.                     <a>乳液面霜</a>  
  227.                     <a>精华液</a>  
  228.                 </dd>  
  229.             </dl>  
  230.   
  231.         </div>  
  232.         <div class="sub hide" data-id="6">  
  233.             <dl>  
  234.                 <dt><a >生活电器 <i> ></i></a> </dt>  
  235.                 <dd>  
  236.                     <a>官方直售</a>  
  237.                     <a>生活电器</a>  
  238.                     <a>生活电器</a>  
  239.                     <a>吹风机</a>  
  240.                     <a>精华液</a>  
  241.                     <a>官方直售</a>  
  242.                     <a>面膜</a>  
  243.                     <a>护肤套装</a>  
  244.                     <a>乳液面霜</a>  
  245.                     <a>精华液</a>  
  246.                     <a>官方直售</a>  
  247.                     <a>面膜</a>  
  248.                     <a>护肤套装</a>  
  249.                     <a>乳液面霜</a>  
  250.                     <a>精华液</a>  
  251.                 </dd>  
  252.             </dl>  
  253.   
  254.         </div>  
  255.         <div class="sub hide" data-id="7">  
  256.             <dl>  
  257.                 <dt><a >厨具 <i> ></i></a> </dt>  
  258.                 <dd>  
  259.                     <a>厨具</a>  
  260.                     <a>厨具</a>  
  261.                     <a>油烟机</a>  
  262.                     <a>洗碗机</a>  
  263.                     <a>电磁炉</a>  
  264.                     <a>微波炉</a>  
  265.                 </dd>  
  266.             </dl>  
  267.   
  268.         </div>  
  269.         <div class="sub hide" data-id="8">  
  270.             <dl>  
  271.                 <dt><a >汽车 <i> ></i></a> </dt>  
  272.                 <dd>  
  273.                     <a>汽车</a>  
  274.                     <a>汽车</a>  
  275.                     <a>汽车</a>  
  276.                     <a>汽车</a>  
  277.                     <a>汽车</a>  
  278.                     <a>汽车</a>  
  279.                     <a>汽车</a>  
  280.                     <a>汽车</a>  
  281.                     <a>汽车</a>  
  282.                     <a>汽车</a>  
  283.                 </dd>  
  284.             </dl>  
  285.   
  286.         </div>  
  287.         <div class="sub hide" data-id="9">  
  288.             <dl>  
  289.                 <dt><a >生鲜水果 <i> ></i></a> </dt>  
  290.                 <dd>  
  291.                     <a>火龙果</a>  
  292.                     <a>苹果</a>  
  293.                     <a>榴莲</a>  
  294.                     <a>进口水果</a>  
  295.                     <a>优惠活动</a>  
  296.                     <a>雪梨</a>  
  297.                     <a>山竹</a>  
  298.                     <a>葡萄</a>  
  299.                     <a>泰国芒果</a>  
  300.                     <a>柚子</a>  
  301.                     <a>马蹄</a>  
  302.                     <a>橘子</a>  
  303.                     <a>香蕉</a>  
  304.                     <a>猕猴桃</a>  
  305.                     <a>椰子</a>  
  306.                 </dd>  
  307.             </dl>  
  308.   
  309.         </div>  
  310.         <div class="sub hide" data-id="10">  
  311.             <dl>  
  312.                 <dt><a >当季热卖 <i> ></i></a> </dt>  
  313.                 <dd>  
  314.                     <a>定制窗帘</a>  
  315.                     <a>抱枕</a>  
  316.                     <a>被子</a>  
  317.                     <a>两用坐垫</a>  
  318.                     <a>国际家纺床品</a>  
  319.                     <a>国际居家布艺</a>  
  320.                     <a>国际家居饰品</a>  
  321.                 </dd>  
  322.             </dl>  
  323.   
  324.         </div>  
  325.     </div>  
  326. </div>  
  327.   
  328.   
  329. </div>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_676.html