js制造京东 多个tab切换效果
日期：2014-05-16 浏览次数：20580 次
例子效果：
代码如下：
<!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>无标题文档</title>
<style type="text/css">
body,div,p,ul,li{padding:0;margin:0;}
#main{width:1005px;background:#ccc;overflow:hidden;zoom:1;}
ul li{float:left;list-style:none;}
#title li{width:200px;height:30px;line-height:30px;text-align:center;font-size:14px;font-weight:bold;background:#C00;border-right:1px solid #FF0;cursor:default}
#title .active{background:#9F0}
#content{padding-top:20px;}
#content p{padding-top:20px;}
.hide{display:none;}
</style>
<script type="text/javascript">
window.onload = function(){
var oTitle = document.getElementById("title").children;
var oContent = document.getElementById("content").children;
for(var i = 0;i<oTitle.length;i++){
oTitle[i].index = i;//增加一个自定义属性
}
for(var i = 0;i<oTitle.length;i++){
oTitle[i].onmouseover = function(){
for(var i=0;i<oTitle.length;i++){
oTitle[i].className = "";
oContent[i].style.display = "none";//先去掉className，display变为n“none”
oTitle[this.index].className = "active";
oContent[this.index].style.display = "block";
}
}
}
}
</script>
</head>
<body>
<div id="main">
<div>
<ul id="title">
<li class="active">疯狂抢购</li>
<li>猜您喜欢</li>
<li>热卖商品</li>
<li>热评商品</li>
<li>新品上架</li>
</ul>
</div>
<div id="content">
<div class="hide" style="display:block">
<p>疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购</p>
<p>疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购
