<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>tab标签自动切换</title>
<style type="text/css">
#box{width:500px;font-size:12px}
#box ul{margin:0;padding:0;list-style:none}
#box #tab{height:25px;padding-left:10px;border-bottom:1px solid #AACBEE}
#box #tab li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer}
#box #tab li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px}
#box #tab_con{border:1px solid #AACBEE;border-top:none;padding:20px}
#box #tab_con li{display:none}
#box #tab_con #tab_con_1{display:block}
</style>
</head>
<body>
<div id="box">
<ul id="tab">
<li class="on" id="tab_1" onMouseOver="switchTab(1)">新闻</li>
<li id="tab_2" onMouseOver="switchTab(2)">财经</li>
<li id="tab_3" onMouseOver="switchTab(3)">娱乐</li>
<li id="tab_4" onMouseOver="switchTab(4)">军事</li>
</ul>
<ul id="tab_con">
<li id="tab_con_1">新闻内容</li>
<li id="tab_con_2">财经内容</li>
<li id="tab_con_3">娱乐内容</li>
<li id="tab_con_4">娱乐内容2</li>
</ul>
</div>
<script type="text/javascript">
var tabTimer = null;
function G(obj){
return document.getElementById(obj);
}
function switchTab(n){
for(var i = 1; i<= 4; i++){
G("tab_" + i).className = "";
G("tab_con_" + i).style.display = "none";
}
G("tab_" + n).className = "on";
G("tab_con_" + n).style.display = "block";
autoSwitchTab(n);
//alert("switchTab");
}
function autoSwitchTab(j){
clearTimeout(tabTimer);
var j = (j >= 4) ? 1 : j + 1;
tabTimer = setTimeout("switchTab("+j+")",1000);
}
autoSwitchTab(1);
</script>
</body>
</html>
代码原理:
通过style.