以下是 jQuery分类选择座椅产品展示代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery分类选择座椅产品展示代码</title>
<link href="css/css.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<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/-->
</body>
</html>
JS代码(js.js):
// JavaScript Document$(function(){
//.chairList dl$(".chairList dl:first").addClass("dlStyle");
//.kiddyMidBox$(".kiddyMidBox:first,.chairStyleBox:first").show();
$(".chairList dl").click(function(){
$(this).addClass("dlStyle").siblings("dl").removeClass("dlStyle");
var dlindex=$(this).index();
$(".kiddyMidBox").eq(dlindex).show().siblings(".kiddyMidBox").hide();
$(".chairStyleBox").eq(dlindex).show().siblings(".chairStyleBox").hide();
}
)$(".chairZhengTop img:first,.chairZhengCenter img:first,.chairZhengBottom img:first,.chairCeTop img:first,.chairCeCenter img:first,.chairCeBottom img:first,.qianzhiCe img:first,.qianzhiNei img:first,.qianzhiZheng img:first,.zuoyiLeft img:first,.zuoyiRight img:first").show();
//样式/*$(".chairTopStyle li,.chairCenterStyle li,.chairBottomStyle li").click(function(){
$(this).children("img").toggle();
}
);
*/
//安全座椅样式选择$(".chairStyleBox:first .chairTopStyle li:first,.chairStyleBox:first .chairCenterStyle li:first,.chairStyleBox:first .chairBottomStyle li:first,.chairStyleBox:eq(1) .chairTopStyle li:first,.chairStyleBox:eq(1) .chairCenterStyle li:first,.chairStyleBox:eq(1) .chairBottomStyle li:first,.chairStyleBox:eq(2) .chairTopStyle li:first,.chairStyleBox:eq(2) .chairCenterStyle li:first").addClass("listyle");
$(".chairStyleBox:first .chairTopStyle li").click(function(){
$(this).addClass("listyle").siblings("li").removeClass("listyle");
var topIndex=$(this).index();
$(".chairZhengTop img").eq(topIndex).fadeIn().siblings("img").hide();
$(".chairCeTop img").eq(topIndex).fadeIn().siblings("img").hide();
}
)$(".chairStyleBox:first .chairCenterStyle li").click(function(){
$(this).addClass("listyle").siblings("li").removeClass("listyle");
var topIndex=$(this).index();
$(".chairZhengCenter img").eq(topIndex).fadeIn().siblings("img").hide();
$(".chairCeCenter img").eq(topIndex).fadeIn().siblings("img").hide();
}
)$(".chairStyleBox:first .chairBottomStyle li").click(function(){
$(this).addClass("listyle").siblings("li").removeClass("listyle");
var topIndex=$(this).index();
$(".chairCeBottom img").eq(topIndex).fadeIn().siblings("img").hide();
$(".chairZhengBottom img").eq(topIndex).fadeIn().siblings("img").hide();
}
)//前置护体样式选择$(".chairStyleBox:eq(1) .chairTopStyle li").click(function(){
$(this).addClass("listyle").siblings("li").removeClass("listyle");
var topIndex=$(this).index();
$(".qianzhiCe img").eq(topIndex).fadeIn().siblings("img").hide();
}
)$(".chairStyleBox:eq(1) .chairCenterStyle li").click(function(){
$(this).addClass("listyle").siblings("li").removeClass("listyle");
var topIndex=$(this).index();
$(".qianzhiNei img").eq(topIndex).fadeIn().siblings("img").hide();
}
)$(".chairStyleBox:eq(1) .chairBottomStyle li").click(function(){
$(this).addClass("listyle").siblings("li").removeClass("listyle");
var topIndex=$(this).index();
$(".qianzhiZheng img").eq(topIndex).fadeIn().siblings("img").hide();
}
)//座椅垫样式选择$(".chairStyleBox:eq(2) .chairTopStyle li").click(function(){
$(this).addClass("listyle").siblings("li").removeClass("listyle");
var topIndex=$(this).index();
$(".zuoyiLeft img").eq(topIndex).fadeIn().siblings("img").hide();
}
)$(".chairStyleBox:eq(2) .chairCenterStyle li").click(function(){
$(this).addClass("listyle").siblings("li").removeClass("listyle");
var topIndex=$(this).index();
$(".zuoyiRight img").eq(topIndex).fadeIn().siblings("img").hide();
}
)//下一步 安全座椅$(".next-an").click(function(){
$(this).parents(".chairStyleBox").hide();
$(".chairStyleBox:eq(1)").show();
$(".kiddyMidBox:first").hide();
$(".kiddyMidBox:eq(1)").show();
$(".chairList dl:eq(1)").addClass("dlStyle").siblings("dl").removeClass("dlStyle");
}
)//下一步 前置护体$(".next-qian").click(function(){
$(this).parents(".chairStyleBox").hide();
$(".chairStyleBox:eq(2)").show();
$(".kiddyMidBox:eq(1)").hide();
$(".kiddyMidBox:eq(2)").show();
$(".chairList dl:eq(2)").addClass("dlStyle").siblings("dl").removeClass("dlStyle");
}
)//返回第一步 座椅垫$(".next-zuo").click(function(){
$(this).parents(".chairStyleBox").hide();
$(".chairStyleBox:first").show();
$(".kiddyMidBox:eq(2)").hide();
$(".kiddyMidBox:first").show();
$(".chairList dl:first").addClass("dlStyle").siblings("dl").removeClass("dlStyle");
}
)}
)CSS代码(css.css):
@charset "utf-8";/* CSS Document */
*{margin:0;padding:0;}
body{font-family:"微软雅黑";}
ul{list-style:none;}
.clears{clear:both;}
img{}
.kiddy{width:1366px;margin:30px auto;}
/*kiddyLeft*/
.kiddyLeft{width:230px;float:left;margin-right:50px;padding-top:50px;}
.kiddyLeft h1{font-size:30px;line-height:25px;text-align:center;margin:30px 0;color:#C2D700;}
.kiddyLeft h1 span{font-size:14px;font-weight:400;}
.chairList{}
.chairList dl{width:146px;height:58px;padding-left:17px;margin:0 auto 15px auto;cursor:pointer;}
.chairList dl.dlStyle{background:url(../images/leftbg.png);color:#fff;}
.chairList dt{width:30px;height:58px;float:left;text-align:center;line-height:58px;font-size:28px;font-weight:bold;}
.chairList dd{width:85px;float:left;margin-left:10px;line-height:22px;padding-top:10px;}
.chairList dd h2{font-size:18px;}
.chairList dd h3{font-size:12px;}
/*kiddyMid*/
.kiddyMid{width:700px;float:left;padding-top:20px;}
.kiddyMidLeft{float:left;width:337px;height:450px;position:relative;}
.chairZhengTop{position:absolute;left:0;top:0;width:337px;height:444px;}
.chairZhengCenter{width:337px;height:444px;position:absolute;bottom:7px;right:0px;}
.chairZhengBottom{width:337px;height:444px;position:absolute;right:0px;bottom:7px;}
.kiddyMidRight{width:337px;height:450px;position:relative;float:right;}
.chairCeTop,.chairCeCenter,.chairCeBottom{width:337px;height:444px;position:absolute;}
.chairCeTop{left:0;top:0;}
.chairCeCenter{bottom:7px;right:0px;}
.chairCeBottom{right:0px;bottom:7px;}
.chairZhengTop img,.chairZhengCenter img,.chairZhengBottom img,.chairCeTop img,.chairCeCenter img,.chairCeBottom img,.qianzhiCe img,.qianzhiNei img,.qianzhiZheng img{display:none;}
/*kiddyMid*/
.kiddyRight{width:280px;float:right;padding:0 40px;border-left:#ccc 1px solid;}
.kiddyRight h1{font-size:30px;color:#C2D700;height:40px;line-height:40px;margin:25px 0;}
.c3A2D27{background:#3A2D27 url(../images/backstyle1.jpg) left top no-repeat;}
.c5C4615{background:#5C4615 url(../images/backstyle2.jpg) left top no-repeat;}
.c9B2802{background:#9B2802 url(../images/backstyle3.jpg) left top no-repeat;}
.cD0B276{background:#D0B276 url(../images/backstyle4.jpg) left top no-repeat;}
.c2F3B39{background:#2F3B39 url(../images/backstyle5.jpg) left top no-repeat;}
.c6B5523{background:#6B5523 url(../images/backstyle6.jpg) left top no-repeat;}
.cA73507{background:#A73507 url(../images/backstyle7.jpg) left top no-repeat;}
.kiddyRight h2{font-size:14px;font-weight:400;height:40px;line-height:40px;clear:both;}
.kiddyRight ul{}
.kiddyRight li{width:50px;height:25px;border:#030 2px solid;float:left;margin:0 15px 15px 0;cursor:pointer;}
.kiddyRight li.listyle{border:#f00 2px solid;background-position:left bottom;}
.kiddyRight li img{display:none;}
/*kiddyMidBox*/
.kiddyMidBox{position:relative;width:700px;display:none;}
.qianzhiCe,.qianzhiNei,.qianzhiZheng{width:442px;height:390px;position:absolute;}
.qianzhiCe{left:80px;top:50px;}
.qianzhiNei{left:80px;top:50px;}
.qianzhiZheng{left:80px;top:50px;}
.next{width:145px;height:37px;line-height:37px;text-align:center;background:#c3d600;color:#fff;font-weight:bold;font-size:16px;margin:20px auto;cursor:pointer;}
/*chairStyleBox*/
.chairStyleBox{display:none;}
/*zuoyiLeft*/
.zuoyiLeft,.zuoyiRight{width:340px;height:355px;float:left;position:relative;}
.zuoyiLeft img{position:absolute;left:0;top:0;display:none;}
.zuoyiRight img{position:absolute;right:0;top:0;display:none;}
.zuoyiRight{margin-left:10px;}
分享到QQ
分享到微博
微信扫一扫
