论坛快速导航: 2009年素材区 矢量素材 图片素材 网页模板 原创作品 佳作欣赏 网页设计专区 摄影之家 PhotoShop CorelDraw Illustrator | 在线繁体字转换翻译工具 WAP RSS
返回简洁设计网首页
最新教程 推荐教程 热门教程
当前位置: 简洁设计网 > 设计教程 > 网站制作 > htm_css > 正文
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(http://school.jianjie8.com/UploadFiles_3615/200602/20060214092618928.gif) repeat-x top center #f8f8f8;border-color: #cccccc}
.i203cmenuon0 {background:url(http://school.jianjie8.com/UploadFiles_3615/200602/20060214092618854.gif) repeat-x top center #FEEFB6;border-color:#F3B75C;color:#CC5B00;}
.i203cmenuon1 {background:url(http://school.jianjie8.com/UploadFiles_3615/200602/20060214092618824.gif) repeat-x top center #F7FADE;border-color:#C8CF65;color:#009999;}
.i203cmenuon2 {background:url(http://school.jianjie8.com/UploadFiles_3615/200602/20060214092618280.gif) repeat-x top center #F1F3F5;border-color:#B9C2D0;color:#5C80BA;}
.i203cmenuon3 {background:url(http://school.jianjie8.com/UploadFiles_3615/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 />
</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>

点击进入论坛和大家一起交流设计,分享设计素材,结交设计朋友
设为首页 | 加入收藏 | 关于我们 | 联系我们 | 合作伙伴 | 版权信息 | 广告联系 | 友情链接 | 网站地图
版权所有 简洁设计网 [www.jianjie8.com] 您电脑的分辨率是 像素
Copyright 2008-2015 Www.Jianjie8.Com All Rights Reserved
陇ICP备05003399号