精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
返回建站学首页
导航:
建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题
当前位置:首页>网站设计>css教程>正文

css选项卡


来源:网络搜集 时间:06-06-13 点击: 点击这里收藏本文

<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 />
</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>



  把此文章收藏到:          
广而告之
文章搜索
  • Google JZxue.Com

关于我们 | 联系我们 | 友情链接 | 网站地图
Copyright © 2005 - 2006 建站学 All rights reserved.