<!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=utf8">
<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>
/*********1**********/
<div id="box">
<ul id="tab">
<li class="on" id="tab_1" οnclick="switchTab(1)">新闻</li>
<li id="tab_2" οnclick="switchTab(2)">财经</li>
<li id="tab_3" οnclick="switchTab(3)">娱乐</li>
<li id="tab_4" οnclick="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">娱乐内容3</li>
</ul>
</div>
<script type="text/javascript">
function switchTab(n){
for(var i = 1; i <= 4; i++){
document.getElementById("tab_" + i).className = "";
document.getElementById("tab_con_" + i).style.display = "none";
}
document.getElementById("tab_" + n).className = "on";
document.getElementById("tab_con_" + n).style.display = "block";
}
</script>
</body>
</html>
效果图
6040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
