DIV结构如下：
│body {} /*这是一个HTML元素*/
└# tab1 {} /*页面层容器*/
├. tablist {} /*标题栏目*/
├. tabcontent {} /*页面内容*/
html代码如下：
<div id="tab1"><div class="tablist">
<ul>
<li><a href="javascript:void(0)" onmouseover="selecttab(this)" class="selected">公司新闻</a></li>
<li><a href="javascript:void(0)" onmouseover="selecttab(this)">公司新闻</a></li>
<li><a href="javascript:void(0)" onmouseover="selecttab(this)">公司新闻</a></li>
<li><a href="javascript:void(0)" onmouseover="selecttab(this)">公司新闻</a></li>
<li><a href="javascript:void(0)" onmouseover="selecttab(this)">公司新闻</a></li>
</ul>
</div>
<div class="tabcontent">
<div class="tabvalue">
<ul>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.70版发布</a></li>
<li><a href="#">» [官方新闻] 杰奇网络2009年“十·一”放假通知</a></li>
<li><a href="#">» [产品新闻] JIEQI CMS 1.60正式发布，免费版同步提供...</a></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.60版发布</a></li>
<li><a href="#">» [官方新闻] 杰奇网络2009春节放假通知</a></li>
<li><a href="#">» [产品新闻] JIEQI CMS 1.5免费版发布</a></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.50 + WAP插件发布</a></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.40版发布</a></li>
<li><a href="#">» [产品新闻] 杰奇在线漫画系统1.00版发布</a></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.30版发布</a></li>
</ul>
</div>
<div class="tabvalue" style="display:none">
<ul>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.70版发布</a></li>
<li><a href="#">» [官方新闻] 杰奇网络2009年“十·一”放假通知</a></li>
<li><a href="#">» [产品新闻] JIEQI CMS 1.60正式发布，免费版同步提供...</a></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.60版发布</a></li>
<li><a href="#">» [官方新闻] 杰奇网络2009春节放假通知</a></li>
<li><a href="#">» [产品新闻] JIEQI CMS 1.5免费版发布</a></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.50 + WAP插件发布</a></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.40版发布</a></li>
<li><a href="#">» [产品新闻] 杰奇在线漫画系统1.00版发布</a></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.30版发布</a></li>
</ul>
</div>
<div class="tabvalue" style="display:none">
<ul>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.70版发布</a></li>
<li><a href="#">» [官方新闻] 杰奇网络2009年“十·一”放假通知</a></li>
<li><a href="#">» [产品新闻] JIEQI CMS 1.60正式发布，免费版同步提供...</a></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.60版发布</a></li>
<li><a href="#">» [官方新闻] 杰奇网络2009春节放假通知</a></li>
<li><a href="#">» [产品新闻] JIEQI CMS 1.5免费版发布</a></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.50 + WAP插件发布</a></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.40版发布</a></li>
<li><a href="#">» [产品新闻] 杰奇在线漫画系统1.00版发布</a></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.30版发布</a></li>
</ul>
</div>
<div class="tabvalue" style="display:none">
<ul>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.70版发布</a></li>
<li><a href="#">» [官方新闻] 杰奇网络2009年“十·一”放假通知</a></li>
<li><a href="#">» [产品新闻] JIEQI CMS 1.60正式发布，免费版同步提供...</a></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.60版发布</a></li>
<li><a href="#">» [官方新闻] 杰奇网络2009春节放假通知</a></li>
<li><a href="#">» [产品新闻] JIEQI CMS 1.5免费版发布</a></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.50 + WAP插件发布</a></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.40版发布</a></li>
<li><a href="#">» [产品新闻] 杰奇在线漫画系统1.00版发布</a></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.30版发布</a></li>
</ul>
</div>
<div class="tabvalue" style="display:none">
<ul>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.70版发布</a></li>
<li><a href="#">» [官方新闻] 杰奇网络2009年“十·一”放假通知</a></li>
<li><a href="#">» [产品新闻] JIEQI CMS 1.60正式发布，免费版同步提供...</a></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.60版发布</a></li>
<li><a href="#">» [官方新闻] 杰奇网络2009春节放假通知</a></li>
<li><a href="#">» [产品新闻] JIEQI CMS 1.5免费版发布</a></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.50 + WAP插件发布</a></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.40版发布</a></li>
<li><a href="#">» [产品新闻] 杰奇在线漫画系统1.00版发布</a></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.30版发布</a></li>
</ul>
</div>
</div>
</div>
CSS样式如下：
*{margin:0px; padding:0px;}body{font-size:14px; color:#333; line-height:22px; }
ul,li{ list-style-type:none;}
a{ color:#333; text-decoration:none;}
a:hover{color:#FF0000;}
.fl{float:left;}
.fr{float:right;}
#tab1{ margin:20px auto; width:500px; overflow:hidden;}
.tablist{float:left;}
.tablist li{ float:left; padding-left:10px;}
.tablist li a{color:#333; display:block; padding:3px 5px 0px 5px;}
.tablist li a:hover{color:#333; border:solid 1px #ccc;}
.selected{border:solid 1px #ccc; font-weight:bold;}
.tabcontent{ padding:5px 0px 5px 10px; float:left; font-size:12px; border:solid 1px #ccc; width:488px;
margin-top:5px;
}
js如下：
function selecttab(obj){var n = 0;
var tabs = obj.parentNode.parentNode.getElementsByTagName("li");
for(i=0; i<tabs.length; i++){
tmp = tabs[i].getElementsByTagName("a")[0];
if(tmp == obj){
tmp.className="selected";
n=i;
}else{
tmp.className="";
}
}
var contents =
obj.parentNode.parentNode.parentNode.parentNode.getElementsByTagName("div")[1].getElementsByTagName("div");
for(i=0; i<contents.length; i++){
contents[i].style.display = i==n ? "block" : "none";
}
}