利用jQuery實現座椅產品分類選擇展示效果



52 206 69



特效描述:利用jQuery實現 座椅產品 分類選擇 展示效果,利用jQuery實現座椅產品分類選擇展示效果

代碼結構

1. 引入CSS

<link href="css/css.css" type="text/css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js.js"></script>

3. HTML代碼

 <div class="kiddy">
  <div class="kiddyLeft">
   <h1>真皮座椅<br /><span>(kiddy Guardianfix Pro 2)</span></h1> 
   <div class="chairList">
    <dl>
     <dt>1</dt>
     <dd>
      <h2>安全座椅</h2>
      <h3>3000人選擇</h3>
     </dd>
     <div class="clears"></div>
    </dl>
    <dl>
     <dt>2</dt>
     <dd>
      <h2>前置護體</h2>
      <h3>5666人選擇</h3>
     </dd>
     <div class="clears"></div>
    </dl>
    <dl>
     <dt>3</dt>
     <dd>
      <h2>座椅墊</h2>
      <h3>45888人選擇</h3>
     </dd>
     <div class="clears"></div>
    </dl>
   </div><!--chairList/-->
  </div><!--kiddyLeft/-->
  <div class="kiddyMid">
   <div class="kiddyMidBox">
    <div class="kiddyMidLeft">
     <!--真皮座椅正面 上 strat-->
     <div class="chairZhengTop">
      <img src="images/zheng/top/沖孔透亮銀-雞皮絨針織復合布.png" />
      <img src="images/zheng/top/雞皮絨針織復合布.png" />
      <img src="images/zheng/top/雞皮絨針織復合布-紅.png" />
      <img src="images/zheng/top/真皮-(2).png" />
      <img src="images/zheng/top/真皮.png" />
      <img src="images/zheng/top/真皮-3.png" />
      <img src="images/zheng/top/真皮-紅.png" />
     </div><!--chairTop/-->
     <!--真皮座椅正面 上 over-->
     <!--真皮座椅正面 中 strat-->
     <div class="chairZhengCenter">
      <img src="images/zheng/center/沖孔透亮銀-雞皮絨針織復合布.png" />
      <img src="images/zheng/center/雞皮絨針織復合布.png" />
      <img src="images/zheng/center/雞皮絨針織復合布-紅.png" />
      <img src="images/zheng/center/真皮-(2).png" />
      <img src="images/zheng/center/真皮.png" />
      <img src="images/zheng/center/真皮-3.png" />
      <img src="images/zheng/center/真皮-紅.png" />
     </div><!--chairZhengCenter/-->
     <!--真皮座椅正面 中 over-->
     <!--真皮座椅正面 下 start-->
     <div class="chairZhengBottom">
      <img src="images/zheng/bottom/沖孔透亮銀-雞皮絨針織復合布.png" />
      <img src="images/zheng/bottom/雞皮絨針織復合布.png" />
      <img src="images/zheng/bottom/雞皮絨針織復合布-紅.png" />
      <img src="images/zheng/bottom/真皮-(2).png" />
      <img src="images/zheng/bottom/真皮.png" />
      <img src="images/zheng/bottom/真皮-3.png" />
      <img src="images/zheng/bottom/真皮-紅.png" />
     </div><!--chairZhengBottom/-->
     <!--真皮座椅正面 下 over-->
    </div><!--kiddyMidLeft/-->
    <div class="kiddyMidRight">
     <!--真皮座椅側面 上 over-->
     <div class="chairCeTop">
      <img src="images/ce/top/沖孔透亮銀-雞皮絨針織復合布.png" />
      <img src="images/ce/top/雞皮絨針織復合布.png" />
      <img src="images/ce/top/雞皮絨針織復合布-紅.png" />
      <img src="images/ce/top/真皮-(2).png" />
      <img src="images/ce/top/真皮.png" />
      <img src="images/ce/top/真皮-3.png" />
      <img src="images/ce/top/真皮-紅.png" />
     </div><!--chairCeTop/-->
     <!--真皮座椅側面 上 over-->
     <!--真皮座椅側面 中 start-->
     <div class="chairCeCenter">
      <img src="images/ce/center/沖孔透亮銀-雞皮絨針織復合布.png" />
      <img src="images/ce/center/雞皮絨針織復合布.png" />
      <img src="images/ce/center/雞皮絨針織復合布-紅.png" />
      <img src="images/ce/center/真皮-(2).png" />
      <img src="images/ce/center/真皮.png" />
      <img src="images/ce/center/真皮-3.png" />
      <img src="images/ce/center/真皮-紅.png" />
     </div><!--chairCeCenter/-->
     <!--真皮座椅側面 中 over-->
     <!--真皮座椅側面 下 start-->
     <div class="chairCeBottom">
      <img src="images/ce/bottom/沖孔透亮銀-雞皮絨針織復合布.png" />
      <img src="images/ce/bottom/雞皮絨針織復合布.png" />
      <img src="images/ce/bottom/雞皮絨針織復合布-紅.png" />
      <img src="images/ce/bottom/真皮-(2).png" />
      <img src="images/ce/bottom/真皮.png" />
      <img src="images/ce/bottom/真皮-3.png" />
      <img src="images/ce/bottom/真皮-紅.png" />
     </div><!--chairCeBottom/-->
     <!--真皮座椅側面 下 over-->
    </div><!--kiddyMidRight/-->
   </div><!--kiddyMidBox-->
   <div class="kiddyMidBox">
    <!--前置護體側面 start-->
    <div class="qianzhiCe">
     <img src="images/qianzhihuti/ce/沖孔透亮銀-雞皮絨針織復合布.png" />
     <img src="images/qianzhihuti/ce/雞皮絨針織復合布.png" />
     <img src="images/qianzhihuti/ce/雞皮絨針織復合布-紅.png" />
     <img src="images/qianzhihuti/ce/真皮-(2).png" />
     <img src="images/qianzhihuti/ce/真皮.png" />
     <img src="images/qianzhihuti/ce/真皮-3.png" />
     <img src="images/qianzhihuti/ce/真皮-紅.png" />
    </div><!--qianzhiCe/-->
    <!--前置護體側面 over-->
    <!--前置護體內 start-->
    <div class="qianzhiNei">
     <img src="images/qianzhihuti/nei/沖孔透亮銀-雞皮絨針織復合布.png" />
     <img src="images/qianzhihuti/nei/雞皮絨針織復合布.png" />
     <img src="images/qianzhihuti/nei/雞皮絨針織復合布-紅.png" />
     <img src="images/qianzhihuti/nei/真皮-(2).png" />
     <img src="images/qianzhihuti/nei/真皮.png" />
     <img src="images/qianzhihuti/nei/真皮-3.png" />
     <img src="images/qianzhihuti/nei/真皮-紅.png" />
    </div><!--qianzhiCe/-->
    <!--前置護體內 over-->
    <!--前置護體正面 start-->
    <div class="qianzhiZheng">
     <img src="images/qianzhihuti/zheng/沖孔透亮銀-雞皮絨針織復合布.png" />
     <img src="images/qianzhihuti/zheng/雞皮絨針織復合布.png" />
     <img src="images/qianzhihuti/zheng/雞皮絨針織復合布-紅.png" />
     <img src="images/qianzhihuti/zheng/真皮-(2).png" />
     <img src="images/qianzhihuti/zheng/真皮.png" />
     <img src="images/qianzhihuti/zheng/真皮-3.png" />
     <img src="images/qianzhihuti/zheng/真皮-紅.png" />
    </div><!--qianzhiCe/-->
    <!--前置護體正面 over-->
   </div><!--kiddyMidBox/-->
   <div class="kiddyMidBox">
    <div class="zuoyiLeft">
     <img src="images/zuoyi/zheng/沖孔透亮銀-雞皮絨針織復合布.png" />
     <img src="images/zuoyi/zheng/雞皮絨針織復合布.png" />
     <img src="images/zuoyi/zheng/雞皮絨針織復合布-紅.png" />
     <img src="images/zuoyi/zheng/真皮-(2).png" />
     <img src="images/zuoyi/zheng/真皮.png" />
     <img src="images/zuoyi/zheng/真皮-3.png" />
     <img src="images/zuoyi/zheng/真皮-紅.png" />
    </div><!--zuoyiLeft/-->
    <div class="zuoyiRight">
     <img src="images/zuoyi/diankao/沖孔透亮銀-雞皮絨針織復合布.png" />
     <img src="images/zuoyi/diankao/雞皮絨針織復合布.png" />
     <img src="images/zuoyi/diankao/雞皮絨針織復合布-紅.png" />
     <img src="images/zuoyi/diankao/真皮-(2).png" />
     <img src="images/zuoyi/diankao/真皮.png" />
     <img src="images/zuoyi/diankao/真皮-3.png" />
     <img src="images/zuoyi/diankao/真皮-紅.png" />
    </div><!--zuoyiRight/-->
   </div><!--kiddyMidBox/-->
  </div><!--kiddyMids-->
  <div class="kiddyRight">
   <!--安全座椅 樣式 start-->
   <div class="chairStyleBox">
    <h1>顏色、材質選擇</h1>
    <h2>座椅正上</h2>
    <ul class="chairTopStyle">
     <li class="c3A2D27" title="沖孔透亮銀-雞皮絨針織復合布"></li>
     <li class="c5C4615" title="雞皮絨針織復合布"></li>
     <li class="c9B2802" title="雞皮絨針織復合布-紅"></li>
     <li class="cD0B276" title="真皮-(2)"></li>
     <li class="c2F3B39" title="真皮"></li>
     <li class="c6B5523" title="真皮-3"></li>
     <li class="cA73507" title="真皮-紅"></li>
     <div class="clears"></div>
    </ul><!--chairStyle/-->
    <h2>座椅正中</h2>
     <ul class="chairCenterStyle">
      <li class="c3A2D27" title="沖孔透亮銀-雞皮絨針織復合布"></li>
      <li class="c5C4615" title="雞皮絨針織復合布"></li>
      <li class="c9B2802" title="雞皮絨針織復合布-紅"></li>
      <li class="cD0B276" title="真皮-(2)"></li>
      <li class="c2F3B39" title="真皮"></li>
      <li class="c6B5523" title="真皮-3"></li>
      <li class="cA73507" title="真皮-紅"></li>
      <div class="clears"></div>
     </ul><!--chairStyle/-->
    <h2>座椅正下</h2>
    <ul class="chairBottomStyle">
     <li class="c3A2D27" title="沖孔透亮銀-雞皮絨針織復合布"></li>
     <li class="c5C4615" title="雞皮絨針織復合布"></li>
     <li class="c9B2802" title="雞皮絨針織復合布-紅"></li>
     <li class="cD0B276" title="真皮-(2)"></li>
     <li class="c2F3B39" title="真皮"></li>
     <li class="c6B5523" title="真皮-3"></li>
     <li class="cA73507" title="真皮-紅"></li>
     <div class="clears"></div>
    </ul><!--chairStyle/-->
    <div class="next next-an">下一步</div>
   </div><!--chairStyleBox/-->
   <!--安全座椅 樣式 over-->
   <!--前置護體 樣式 start-->
   <div class="chairStyleBox">
    <h1>顏色、材質選擇</h1>
    <h2>前置護體側面</h2>
    <ul class="chairTopStyle">
     <li class="c3A2D27" title="沖孔透亮銀-雞皮絨針織復合布"></li>
     <li class="c5C4615" title="雞皮絨針織復合布"></li>
     <li class="c9B2802" title="雞皮絨針織復合布-紅"></li>
     <li class="cD0B276" title="真皮-(2)"></li>
     <li class="c2F3B39" title="真皮"></li>
     <li class="c6B5523" title="真皮-3"></li>
     <li class="cA73507" title="真皮-紅"></li>
     <div class="clears"></div>
    </ul><!--chairStyle/-->
    <h2>前置護體內側</h2>
     <ul class="chairCenterStyle">
      <li class="c3A2D27" title="沖孔透亮銀-雞皮絨針織復合布"></li>
      <li class="c5C4615" title="雞皮絨針織復合布"></li>
      <li class="c9B2802" title="雞皮絨針織復合布-紅"></li>
      <li class="cD0B276" title="真皮-(2)"></li>
      <li class="c2F3B39" title="真皮"></li>
      <li class="c6B5523" title="真皮-3"></li>
      <li class="cA73507" title="真皮-紅"></li>
      <div class="clears"></div>
     </ul><!--chairStyle/-->
    <h2>前置護體正面</h2>
    <ul class="chairBottomStyle">
     <li class="c3A2D27" title="沖孔透亮銀-雞皮絨針織復合布"></li>
     <li class="c5C4615" title="雞皮絨針織復合布"></li>
     <li class="c9B2802" title="雞皮絨針織復合布-紅"></li>
     <li class="cD0B276" title="真皮-(2)"></li>
     <li class="c2F3B39" title="真皮"></li>
     <li class="c6B5523" title="真皮-3"></li>
     <li class="cA73507" title="真皮-紅"></li>
     <div class="clears"></div>
    </ul><!--chairStyle/-->
    <div class="next next-qian">下一步</div>
   </div><!--chairStyleBox/-->
   <!--前置護體 樣式 over-->
   <!--座椅墊 樣式 start-->
   <div class="chairStyleBox">
    <h1>顏色、材質選擇</h1>
    <h2>座椅墊靠</h2>
    <ul class="chairTopStyle">
     <li class="c3A2D27" title="沖孔透亮銀-雞皮絨針織復合布"></li>
     <li class="c5C4615" title="雞皮絨針織復合布"></li>
     <li class="c9B2802" title="雞皮絨針織復合布-紅"></li>
     <li class="cD0B276" title="真皮-(2)"></li>
     <li class="c2F3B39" title="真皮"></li>
     <li class="c6B5523" title="真皮-3"></li>
     <li class="cA73507" title="真皮-紅"></li>
     <div class="clears"></div>
    </ul><!--chairStyle/-->
    <h2>座椅墊正面</h2>
     <ul class="chairCenterStyle">
      <li class="c3A2D27" title="沖孔透亮銀-雞皮絨針織復合布"></li>
      <li class="c5C4615" title="雞皮絨針織復合布"></li>
      <li class="c9B2802" title="雞皮絨針織復合布-紅"></li>
      <li class="cD0B276" title="真皮-(2)"></li>
      <li class="c2F3B39" title="真皮"></li>
      <li class="c6B5523" title="真皮-3"></li>
      <li class="cA73507" title="真皮-紅"></li>
      <div class="clears"></div>
     </ul><!--chairStyle/-->
    <div class="next next-zuo">返回第一步</div>
   </div><!--chairStyleBox/-->
   <!--座椅墊 樣式 over-->
  </div><!--kiddyRight/-->
  <div class="clears"></div>
 </div><!--kiddy/-->



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 選項卡自動切換 顏色選擇 顏色選擇器 多功能 多功能插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子