利用jQuery实现座椅产品分类选择展示效果



47 186 63



特效描述:利用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

加群请备注:从官网了解到