海量企業(yè)網(wǎng)站模板 · 任您選擇
美出特色，精出品質(zhì)，一切為了企業(yè)更好的營銷
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab選項卡</title>
<style type="text/css">
body {font-size: 12px;}
ul {margin: 0;padding: 0;list-style: none;overflow: hidden;}
ul li {float: left;height: 25px;line-height: 25px;padding: 0 10px;cursor:pointer;}
#cn-lazy,#cn-lazy2{width: 380px;height: 180px;}
#cn-lazy div,#cn-lazy2 div{width: 380px;height: 165px;clear: both;display: none;}
.cn-current {background: #CCC;}
</style>
</head>
<body>
<div id="cn-lazy">
<ul>
<li class="cn-current">選項卡一</li>
<li>選項卡二</li>
<li>選項卡三</li>
</ul>
<div style="display:block">內(nèi)容一</div>
<div>內(nèi)容二</div>
<div>內(nèi)容三</div>
</div>
<div id="cn-lazy2">
<ul>
<li class="cn-current">選項卡一</li>
<li>選項卡二</li>
<li>選項卡三</li>
</ul>
<div style="display:block">內(nèi)容一</div>
<div>內(nèi)容二</div>
<div>內(nèi)容三</div>
</div>
<script type="text/javascript">
function cnTab(cnTable,cnNum){
var Tab= document.getElementById(cnTable).getElementsByTagName("ul");
Tab=Tab[0].getElementsByTagName("li");
var cnDiv= document.getElementById(cnTable).getElementsByTagName("div");
var TabNum = Tab.length;
var cnDivNum=cnDiv.length;
for(i=0;i<TabNum; i++){
Tab[i].className = "";
}
Tab[cnNum].className = "cn-current";
for(i=0;i<cnDivNum;i++){
cnDiv[i].style.display = "none";
}
cnDiv[cnNum].style.display = "block";
}
window.onload=function(){
var TabId=new Array("cn-lazy","cn-lazy2")
for(j=0;j<TabId.length;j++){
var Tab= document.getElementById(TabId[j]).getElementsByTagName("ul");
Tab=Tab[0].getElementsByTagName("li");
for(i=0;i<Tab.length;i++){
Tab[i].DivId=TabId[j];
Tab[i].LiId=i;
Tab[i].onclick=function(){
cnTab(this.DivId,this.LiId);
}
}
}
}
</script>
</body>
</html></td>
</tr>
</table>
蘇公網(wǎng)安備32058302005702號