同一个页面可以会多次用到选项卡效果，每个地方都写一个函数实在麻烦，所以干脆写了个函数，要用的时候定义好CSS直接调用js函数就可以了，非常方便。
虽然技术含量可能不是很高，不过纯原创的东西，总是让自己欣慰点，一步一步来，javascript和css的博大精深还需要我花大量的时间体会。
演示地址：http://www.awebsite.cn/demo/1.html
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">
<!--
* {
font-family:"宋体";
font-size:12px;
padding:0;
margin:0;
}
ul,ol,li {
list-style:none;
}
li {
padding:3px 0 3px 3px;
}
.container {
margin:20px 0 0 20px;
width:400px;
border-left:solid 1px #999933;
border-top:solid 1px #999933;
border-bottom:solid 1px #999933;
}
.content1, .content2 {
clear:both;
width:399px;
border-right:solid 1px #993;
padding:5px 0;
background:#ccc;
display:block;
}
.content2 {
display:none;
}
a.headeron {
display:block;
float:left;
text-align:center;
padding:5px 0;
width:99px;
border-right:solid 1px #993;
background:#CCCCCC;
border-bottom:solid 1px #ccc;
}
a.headerout {
display:block;
float:left;
text-align:center;
padding:5px 0;
width:99px;
border-bottom:solid 1px #993;
border-right:solid 1px #993;
background:#eee;
}
.container1 {
margin:20px 0 0 20px;
width:500px;
border-left:solid 1px #369;
border-top:solid 1px #369;
border-bottom:solid 1px #369;
}
.c1, .c2 {
clear:both;
width:499px;
border-right:solid 1px #369;
padding:5px 0;
background:#f0f0f0;
display:block;
}
.c2 {
display:none;
}
a.header1on {
display:block;
float:left;
text-align:center;
padding:5px 0;
width:99px;
border-right:solid 1px #369;
background:#f0f0f0;
border-bottom:solid 1px #f0f0f0;
}
a.header1out {
display:block;
float:left;
text-align:center;
padding:5px 0;
width:99px;
border-bottom:solid 1px #369;
border-right:solid 1px #369;
background:#999;
}
-->
</style>
<script type="text/javascript">
/*
选项卡效果函数调用过程
变量名解释：
h_id:导航目录项目ID的固定部分
hon_class:当前激活项样式
hout_class:未激活项样式
c_id:主体内容ID的固定部分
totalnumber:参与切换的项目数
activeno:当前激活项的序号
*/
<!--
function showandhide(h_id,hon_class,hout_class,c_id,totalnumber,activeno) {
var h_id,hon_id,hout_id,c_id,totalnumber,activeno;
for (var i=1;i<=totalnumber;i++) {
document.getElementById(c_id+i).style.display=none;
document.getElementById(h_id+i).className=hout_class;
}
document.getElementById(c_id+activeno).style.display=block;
document.getElementById(h_id+activeno).className=hon_class;
}
//-->
</script>
<body>
<div class="container">
<span>
<a href="javascript:showandhide(header,headeron,headerout,content,4,1);" id="header1" class="headeron" onfocus="this.blur();">link1</a>
<a href="javascript:showandhide(header,headeron,headerout,content,4,2);" id="header2" class="headerout" onfocus="this.blur();">link2</a>
<a href="javascript:showandhide(header,headeron,headerout,content,4,3);" id="header3" class="headerout" onfocus="this.blur();">link3</a>
<a href="javascript:showandhide(header,headeron,headerout,content,4,4);" id="header4" class="headerout" onfocus="this.blur();">link4</a>
</span>
<div id="content1" class="content1">
<ul>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
</ul>
</div>
<div id="content2" class="content2">
<ul>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
</ul>
</div>
<div id="content3" class="content2">
<ul>
<li>333333</li>
<li>333333</li>
<li>333333</li>
<li>333333</li>
<li>333333</li>
</ul>
</div>
<div id="content4" class="content2">
<ul>
<li>444444</li>
<li>444444</li>
<li>444444</li>
<li>444444</li>
<li>444444</li>
</ul>
</div>
</div>
<div class="container1">
<span>
<a href="#" onmouseover="showandhide(h,header1on,header1out,c,5,1);" id="h1" class="header1on" onfocus="this.blur();">link1</a>
<a href="#" onmouseover="showandhide(h,header1on,header1out,c,5,2);" id="h2" class="header1out" onfocus="this.blur();">link2</a>
<a href="#" onmouseover="showandhide(h,header1on,header1out,c,5,3);" id="h3" class="header1out" onfocus="this.blur();">link3</a>
<a href="#" onmouseover="showandhide(h,header1on,header1out,c,5,4);" id="h4" class="header1out" onfocus="this.blur();">link4</a>
<a href="#" onmouseover="showandhide(h,header1on,header1out,c,5,5);" id="h5" class="header1out" onfocus="this.blur();">link5</a>
</span>
<div id="c1" class="c1">
<ul>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
</ul>
</div>
<div id="c2" class="c2">
<ul>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
</ul>
</div>
<div id="c3" class="c2">
<ul>
<li>333333</li>
<li>333333</li>
<li>333333</li>
<li>333333</li>
<li>333333</li>
</ul>
</div>
<div id="c4" class="c2">
<ul>
<li>444444</li>
<li>444444</li>
<li>444444</li>
<li>444444</li>
<li>444444</li>
</ul>
</div>
<div id="c5" class="c2">
<ul>
<li>55555</li>
<li>55555</li>
<li>55555</li>
<li>55555</li>
<li>55555</li>
</ul>
</div>
</div>
</body>
</html>
