这个示例展示了如何使用JavaScript和HTML/CSS创建一个动态Tab效果。代码中定义了不同Tab内容，当用户鼠标悬停在Tab按钮上时，会显示相应的内容。包括商品分类如疯狂抢购、热卖商品等，每个Tab下展示多张商品图片及其描述和价格。
图片地址：http://download.youkuaiyun.com/detail/richard_jason/9669782
效果图：
示例代码：
<!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>Tab效果</title>
<style type="text/css">
<!--
*{margin:0;padding:0;border:none;text-shadow:1px 0 0 #ddd;}
a{text-decoration:none;}
img{border:0;}
.container{width:890px; overflow:hidden;font-size:14px; border:1px solid #ddd; border-top:2px solid #c00; margin:40px auto;}
#tabbox{width:895px; height:38px; overflow:hidden; background:#ddd; }
#tabbox span{font-family:"微软雅黑"; font-weight:bold;color:#333; background:#F4F5F5; display:block;width:178px; height:37px; line-height:37px; text-align:center; float:left; margin-right:1px; cursor:pointer;_display:inline;}
#tabbox span.curr{ background:#fff; border-bottom:1px solid #fff; color:#c00;}
#cont div{width:100%; overflow:hidden; display:none;}
#cont div dl{width:130px; margin:20px 24px; float:left;_display:inline;}
#cont div dl dt{margin-bottom:10px;}
#cont div dl dd img{width:130px; height:130px;}
#cont div dl dd.des{width:100%; height:32px; line-height:16px; overflow:hidden; font-size:12px;}
#cont div dl dd.des a{color:#333;}
#cont div dl dd.price{width:100%; height:16px; line-height:16px;font-size:12px;color:#999;}
#cont div dl dd.price span{font-weight:bold; color:#c00;}
#cont div.curr{display:block;}
-->
</style>
<script type="text/javascript">
<!--
function setCurr(index){
var arrSpan=document.getElementById("tabbox").getElementsByTagName("span");
for(var i=0;i<arrSpan.length;i++){arrSpan[i].className="";arrSpan[index].className="curr";}
var arrDiv=document.getElementById("cont").getElementsByTagName("div");
for(var j=0;j<arrDiv.length;j++){arrDiv[j].className="";arrDiv[index].className="curr";}
}
//-->
</script>
</head>
<body>
<div class="container">
<div id="tabbox">
<span id="first" class="curr" onmouseover="setCurr(0)">疯狂抢购</span>
<span onmouseover="setCurr(1)">热卖商品</span>
<span onmouseover="setCurr(2)">热评商品</span>
<span onmouseover="setCurr(3)">新品上架</span>
<span onmouseover="setCurr(4)">猜您喜欢</span>
</div>
<!--end tabbox -->
<div id="cont">
<div class="curr">
<dl>
<dt><a href="#"><img src="images/tab/img0.jpg" /></a></dt>
<dd class="des"><a href="#">德利诗尔DLSER 2012真皮时尚凉拖款</a></dd>
<dd class="price">价格：<span>￥99.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tab/img1.jpg" /></a></dt>
<dd class="des"><a href="#">私募股权投资基金：操作细节与核心范本</a></dd>
<dd class="price">价格：<span>￥44.30</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tab/img2.jpg" /></a></dt>
<dd class="des"><a href="#">量化投资：策略与技术（修订版）</a></dd>
<dd class="price">价格：<span>￥70.10</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tab/img3.jpg" /></a></dt>
<dd class="des"><a href="#">飞利浦(PHILIPS) SPN2351WA/93 五位/全长</a></dd>
<dd class="price">价格：<span>￥95.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tab/img4.jpg" /></a></dt>
<dd class="des"><a href="#">欧珀莱恒久美肌霜50g</a></dd>
<dd class="price">价格：<span>￥256.00</span></dd>
</dl>
</div>
<div>
<dl>
<dt><a href="#"><img src="images/tab/img5.jpg" /></a></dt>
<dd class="des"><a href="#">佳能60D单反套机 中端王者！</a></dd>
<dd class="price">价格：<span>￥7999.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tab/img6.jpg" /></a></dt>
<dd class="des"><a href="#">蓝狐溪流竿4.5米套装</a></dd>
<dd class="price">价格：<span>￥119.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tab/img7.jpg" /></a></dt>
<dd class="des"><a href="#">纽瑞滋海藻DHA核桃油孕妇专用软胶囊 70粒装</a></dd>
<dd class="price">价格：<span>￥268.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tab/img8.jpg" /></a></dt>
<dd class="des"><a href="#">如何从商品期货交易中获利（珍藏版）</a></dd>
<dd class="price">价格：<span>￥36.90</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tab/img9.jpg" /></a></dt>
<dd class="des"><a href="#">美骆世家男式一脚蹬休闲鞋</a></dd>
<dd class="price">价格：<span>￥108.00</span></dd>
</dl>
</div>
<div>
<dl>
<dt><a href="#"><img src="images/tab/img10.jpg" /></a></dt>
<dd class="des"><a href="#">30倍光变！机神来袭！富士SL305 霸气侧漏</a></dd>
<dd class="price">价格：<span>￥1688.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tab/img11.jpg" /></a></dt>
<dd class="des"><a href="#">华为C8812 全面现货销售</a></dd>
<dd class="price">价格：<span>￥990.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tab/img12.jpg" /></a></dt>
<dd class="des"><a href="#">国虹 W100 水滴 3G手机</a></dd>
<dd class="price">价格：<span>￥698.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tab/img13.jpg" /></a></dt>
<dd class="des"><a href="#">三星9228直降300元！双电双充+真皮皮套！</a></dd>
<dd class="price">价格：<span>￥4299.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tab/img14.jpg" /></a></dt>
<dd class="des"><a href="#">佳能5D III单反套机</a></dd>
<dd class="price">价格：<span>￥29999.00</span></dd>
</dl>
</div>
<div>
<dl>
<dt><a href="#"><img src="images/tab/img15.jpg" /></a></dt>
<dd class="des"><a href="#">立减1402！三星46英寸全高清LED液晶电视！</a></dd>
<dd class="price">价格：<span>￥5999.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tab/img16.jpg" /></a></dt>
<dd class="des"><a href="#">宏碁i3 4G 750G 1G独显 Win7</a></dd>
<dd class="price">价格：<span>￥3499.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tab/img17.jpg" /></a></dt>
<dd class="des"><a href="#">宏碁V193WVCb 19英寸宽屏液晶显示器</a></dd>
<dd class="price">价格：<span>￥569.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tab/img18.jpg" /></a></dt>
<dd class="des"><a href="#">恒源祥家纺 床上用品 斜纹纯棉印花四件套 四件套 1米5 四</a></dd>
<dd class="price">价格：<span>￥299.50</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tab/img19.jpg" /></a></dt>
<dd class="des"><a href="#">齐泉黄金五福祥龙银条套装150克 直降优惠</a></dd>
<dd class="price">价格：<span>￥1888.00</span></dd>
</dl>
</div>
<div>
<dl>
<dt><a href="#"><img src="images/tab/img20.jpg" /></a></dt>
<dd class="des"><a href="#">舌尖上的中国（7DVD）</a></dd>
<dd class="price">价格：<span>￥99.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tab/img21.jpg" /></a></dt>
<dd class="des"><a href="#">satchi/沙驰 高端商务皮鞋</a></dd>
<dd class="price">价格：<span>￥419.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tab/img22.jpg" /></a></dt>
<dd class="des"><a href="#">华为C8812 全面现货销售</a></dd>
<dd class="price">价格：<span>￥990.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tab/img23.jpg" /></a></dt>
<dd class="des"><a href="#">给你一个公司，看你怎么管2（热销电子书）</a></dd>
<dd class="price">价格：<span>￥7.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tab/img24.jpg" /></a></dt>
<dd class="des"><a href="#">维棉超细莫代尔冰爽平脚角内裤3条装</a></dd>
<dd class="price">价格：<span>￥109.00</span></dd>
</dl>
</div>
</div>
</div>
</body>
</html>
扫一扫
287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
