css选项卡

<html>
<head>
<title>测试网页</title>
</head>
<body>
<script type="text/javascript">
function iboxActive(id, key, num, max) {
 
var menu = document.getElementById(id + "menu");
 (menu.getElementsByTagName(
"INPUT")[0]||{}).value = key;
 
var main = menu.parentNode;
 
var applyfilter;
 
var menudivs = menu.getElementsByTagName("DIV");
 
for (var i = 0; i < menudivs.length; i ++{
  menudivs[i].className 
= id+"menuoff";
  (menudivs[i].getElementsByTagName(
"A")[0]||{}).className = "";
 }

 menudivs[num].className 
= id+"menuon"+(num % max);
 (menudivs[num].getElementsByTagName(
"A")[0]||{}).className = "active";
 
try {
  applyfilter 
= main.filters && main.filters[0];
  
if (applyfilter) {
   main.filters[
0].apply();
  }

 }
 catch(e) {}

 
var parent = menu.parentNode;
 
var childs = parent.childNodes;
 
var divs = [];
 
for (var i = 0, c = childs.length; i < c; i ++{
  
if (childs[i].tagName == 'DIV'{
   
if (divs.length) childs[i].style.display = 'none';
   divs[divs.length] 
= childs[i];
  }

 }

 divs[num
+1].style.display = 'block';
 
try {
  
if (applyfilter) {
   main.filters[
0].play();
  }

 }
 catch(e) {}
}

</script>
<style type="text/css">
.hotibox
{font-size:12px;color:#000;line-height:18px;}
.hotibox nobr
{padding:0px 0px 0px 10px;width:100%}
.hotibox a
{text-transform:none;text-decoration:none;color:#000;}
.hotibox a:hover
{color:#555;text-decoration:none;}
.i203cmenu 
{width:100%;height:23px;font-size:12px;font-family:Arial;}
.i203cmenu div a 
{text-decoration:none;color:#000000;height:100%;width:100%;display:block}
.i203cmenuon0, .i203cmenuon1, .i203cmenuon2, .i203cmenuon3, .dummy 
{
 float
:left;margin:0 1px 0 1px;
 position
:relative;top:1px;
 width
:50px;height:23px;padding:2px 6px 0 6px;line-height:19px;text-align:center;
 border
: 1px solid black; border-bottom:0;
 cursor
:hand;cursor:pointer;
}

.i203cmenuoff 
{
 cursor
:hand;cursor:pointer;
 float
:left;margin:2px 1px 0 1px;width:50px;height:21px;padding:4px 6px 0 6px;line-height:16px;text-align:center;
 border
:1px solid black; border-bottom:0;
}

.i203c0, .i203c1, .i203c2, .i203c3, .dummy 
{width:100%;border:1px solid;clear:both;}
.i203cmenuoff 
{color:#666666;background:url(/school/UploadFiles/200602/20060214092618928.gif) repeat-x top center #f8f8f8;border-color: #cccccc}
.i203cmenuon0 
{background:url(/school/UploadFiles/200602/20060214092618854.gif) repeat-x top center #FEEFB6;border-color:#F3B75C;color:#CC5B00;}
.i203cmenuon1 
{background:url(/school/UploadFiles/200602/20060214092618824.gif) repeat-x top center #F7FADE;border-color:#C8CF65;color:#009999;}
.i203cmenuon2 
{background:url(/school/UploadFiles/200602/20060214092618280.gif) repeat-x top center #F1F3F5;border-color:#B9C2D0;color:#5C80BA;}
.i203cmenuon3 
{background:url(/school/UploadFiles/200602/20060214092618280.gif) repeat-x top center #F1F3F5;border-color:#B9C2D0;color:#5C80BA;}
.i203c0,.i203c1,.i203c2,.i203c3, 
{border:0;padding-top:5px;}
.i203c0 
{background:#FEEFB6;border:1px solid #F3B75C;}
.i203c1 
{background:#F7FADE;border:1px solid #C8CF65;}
.i203c2 
{background:#F1F3F5;border:1px solid #B9C2D0;}
.i203c3 
{background:#F1F3F5;border:1px solid #B9C2D0;}
</style>

<div class="i203cmenu" id="i203cmenu">
<div class="i203cmenuon0" onclick="iboxActive('i203c', '0', 0, 4);return false"><nobr>本站首页</nobr></div>
<div class="i203cmenuoff" onclick="iboxActive('i203c', '1', 1, 4);return false"><nobr>交流论坛</nobr></div>
<div class="i203cmenuoff" onclick="iboxActive('i203c', '2', 2, 4);return false"><nobr>最新动态</nobr></div>
<div class="i203cmenuoff" onclick="iboxActive('i203c', '3', 3, 4);return false"><nobr>关于我们</nobr></div>
<div class="i203cmenuoff" onclick="iboxActive('i203c', '4', 4, 4);return false"><nobr>联系我们</nobr></div>
<div style="clear:both;display:none"></div>
</div>


<div class="i203c0">
<div class="hotibox">
<br /><br /><br /><br /><br /><br /><br />fsdfd
</div>
</div>

<div class="i203c1" style="display:none;">
<div class="hotibox">
<br /><br /><br /><br /><br /><br /><br />
</div>
</div>

<div class="i203c2" style="display:none;">
<div class="hotibox">
<br /><br /><br /><br /><br /><br /><br />
</div>
</div>

<div class="i203c3" style="display:none;">
<div class="hotibox">
<br /><br /><br /><br /><br /><br /><br />
</div>
</div>

<div class="i203c0" style="display:none;">
<div class="hotibox">
<br /><br /><br /><br /><br /><br /><br />
</div>
</div>
<div style="clear:both;display:none"></div>

</body>
</html>
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值