大家可以说说做选项卡效果都有哪些方法，或者是我下面的代码怎么可以优化一下？
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#tablianxi{
position:absolute;
left:35%;
top:10%;
}
.tab{
float:left;
width:303px;
border:1px solid;
border-right-style:none;
border-bottom-style:none;
}
.xuanzhong{
float:left;
width:100px;
text-align:center;
border-right-width:1px;
border-right-style:solid;
border-right-color:#000000;
background-color:#CC6633;
border-bottom-style:none;
}
.buzhong{
float:left;
width:100px;
text-align:center;
border-right-width:1px;
border-right-style:solid;
border-right-color:#000000;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#000000;
}
.tabcontent{
clear:both;
width:302px;
min-height:300px;
border:1px solid #000000;
border-top-style:none;
background-color:#CC6633;
}
</style>
<script type="text/javascript" language="javascript">
function change(num) {
var t = document.getElementById("tabtop").getElementsByTagName("div");
for (var i = 0; i < t.length; i++) {
t[i].className = "buzhong";}
t[num].className = "xuanzhong";
var y = document.getElementById("tabbottom").getElementsByTagName("div");
for (var j = 0; j < y.length; j++) {
y[j].style.display = "none"}
y[num].style.display = "block";
}
</script>
</head>
<body>
<div id="tablianxi">
<div id="tabtop" class="tab">
<div class="xuanzhong" onmouseover="change(0)">选项卡1</div>
<div class="buzhong" onmouseover="change(1)">选项卡2</div>
<div class="buzhong" onmouseover="change(2)">选项卡3</div>
</div>
<div id="tabbottom">
<div class="tabcontent" style="display:block;">div1</div>
<div class="tabcontent" style="display:none;">div2</div>
<div class="tabcontent" style="display:none;">div3</div>
</div>
</div>
</body> |
收藏
淘帖
踩
