黑马程序员技术交流社区

标题: tab选项卡的优化问题 [打印本页]

作者: 石国庆 时间: 2013-4-10 20:53
标题: tab选项卡的优化问题
大家可以说说做选项卡效果都有哪些方法，或者是我下面的代码怎么可以优化一下？
<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>

作者: 石国庆 时间: 2013-4-10 20:55
害羞的地方都是：#

作者: 郑丹丹1990 时间: 2013-4-10 21:30
这个我不知道，但是我有一个asp.net+tab 效果如下：

as.JPG (5.84 KB, 下载次数: 10)