html部分
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<linkrel="stylesheet"href="tab.css">
<scriptsrc="tab.js"></script>
<title>Document</title>
</head>
<body>
<divid="tab">
<divid="tab-nav"class="tab-nav">
<ul>
<liclass="active"><ahref="#">公告</a></li>
<li><ahref="#">规则</a></li>
<li><ahref="#">论坛</a></li>
<li><ahref="#">安全</a></li>
<li><ahref="#">公益</a></li>
</ul>
</div>
<divid="tab-contain">
<divclass="mod">
<ul>
<li><ahref="#">走进无声课堂</a></li>
<li><ahref="#">淘宝之行大众评审</a></li>
<li><ahref="#">爱心品牌联合征集</a></li>
<li><ahref="#">公益机构淘宝攻略</a></li>
</ul>
</div>
<divclass="mod"style="display:none">
<ul>
<li><ahref="#">[聚焦]金牌卖家再启航</a></li>
<li><ahref="#">[功能]橱柜规则升级啦</a></li>
<li><ahref="#">[话题]又爱又恨优惠券</a></li>
<li><ahref="#">[工具]购后送店铺红包</a></li>
</ul>
</div>
<divclass="mod"style="display:none">
<ul>
<li><ahref="#">张勇：要玩快乐足球</a></li>
<li><ahref="">阿里2000万驰援灾区</a></li>
<li><ahref="">旅游宝让你边玩</a></li>
<li><ahref="">多行跟进阿里信用贷款</a></li>
</ul>
</div>
<divclass="mod"style="display:none">
<ul>
<li><ahref="">[通知]“泛滥换新”</a></li>
<li><ahref="">[通知]“比特币严管”</a></li>
<li><ahref="">[通知]“禁发商品”</a></li>
<li><ahref="">[通知]“商品属性”</a></li>
</ul>
</div>
<divclass="mod"style="display:none">
<ul>
<li><ahref="#">走进无声课堂</a></li>
<li><ahref="#">淘宝之行大众评审</a></li>
<li><ahref="#">爱心品牌联合征集</a></li>
<li><ahref="#">公益机构淘宝攻略</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
css部分
*{
padding:0px;
margin:0px;
list-style:none;
font-size:14px;
}
#tab{
width:298px;
height:120px;
margin:10px;
border:1pxsolid#eee;
overflow:hidden;
}
.tab-nav{
width:400px;
position:relative;
height:27px;
}
.tab-navul{
position:absolute;
width:301px;
left:-1px;
background-color:#f7f7f7;
}
.tab-navli{
float:left;
width:58px;
padding:01px;
height:36px;
background-color:#f7f7f7;
border-bottom:1pxsolid#eee;
text-align:center;
}
.tab-navli.active{
background-color:#fff;
border-bottom-color:#fff;
border-left:1pxsolid#eee;
border-right:1pxsolid#eee;
padding:0px;
font-weight:bolder;
}
lia:link,lia:visited{
text-decoration:none;
color:#000;
}
#tab-contain.mod{
margin:25px6px10px6px;
}
#tab-contain.modulli{
float:left;
width:143px;
height:25px;
overflow:hidden;
}
Js部分
function$(id){
returntypeofid==='string'?document.getElementById(id):id;
}
window.onload=function(){
varnavs=$('tab-nav').getElementsByTagName('li');
vardivs=$('tab-contain').getElementsByTagName('div');
//alert(divs.length);
if(navs.length!=divs.length){
return;
}
for(vari=0;i<navs.length;i++){
navs[i].title=i;
navs[i].onmouseover=function(){
for(varj=0;j<navs.length;j++){
navs[j].className="";
divs[j].style.display="none";
}
this.className="active";
divs[this.title].style.display="block";
}
}
}
|
运行时间载入中.....