DIV结构如下：
　　 │body {}　/*这是一个HTML元素*/
　　 └# tab1 {}　/*页面层容器*/
　　　　　 ├. tablist {}　/*标题栏目*/
　　　　　 ├. tabcontent {}　/*页面内容*/

html代码如下：

<div id="tab1">
<div class="tablist">
<ul>
<li><a href="javascript:void(0)" onclick="selecttab(this)" class="selected">返回首页</a></li>
<li><a href="javascript:void(0)" onclick="selecttab(this)">本站新闻</a></li>
<li><a href="javascript:void(0)" onclick="selecttab(this)">在线书库</a></li>>
<li><a href="javascript:void(0)" onclick="selecttab(this)">电子书店</a></li>
<li><a href="javascript:void(0)" onclick="selecttab(this)">在线漫画</a></li>
<li><a href="javascript:void(0)" onclick="selecttab(this)">个人空间</a></li>
<li><a href="javascript:void(0)" onclick="selecttab(this)">圈子交友</a></li>
<li><a href="javascript:void(0)" onclick="selecttab(this)">分类信息</a></li>
<li><a href="javascript:void(0)" onclick="selecttab(this)">你问我答</a></li>
<li><a href="javascript:void(0)" onclick="selecttab(this)">帐户充值</a></li>
<li><a href="javascript:void(0)" onclick="selecttab(this)">交流论坛</a></li>
<li><a href="javascript:void(0)" onclick="selecttab(this)">用户面板</a></li>
<li><a href="javascript:void(0)" onclick="selecttab(this)">作家工具</a></li>
<li><a href="javascript:void(0)" onclick="selecttab(this)">网站管理</a></li>
</ul>
</div>
<div class="tabcontent">
<div class="tabvalue"><a href="#">返回首页</a>>/div>
<div class="tabvalue" style="display:none"><a href="#">本站新闻</a> ┆ <a href="#">本站新闻</a></div>
<div class="tabvalue" style="display:none"><a href="#">在线书库</a> ┆ <a href="#">在线书库</a></div>
<div class="tabvalue" style="display:none"><a href="#">全部书籍</a></div>
<div class="tabvalue" style="display:none"><a href="#">分类阅读</a> ┆ <a href="#">漫画排行</a></div>
<div class="tabvalue" style="display:none"><a href="#">个人空间</a> ┆ <a href="#">个人空间</a></div>
<div class="tabvalue" style="display:none"><a href="#">圈子交友</a> ┆ <a href="#">圈子交友</a></div>
<div class="tabvalue" style="display:none"><a href="#">分类信息</a> ┆ <a href="#">分类信息</a></div>
<div class="tabvalue" style="display:none"><a href="#">你问我答</a> ┆ <a href="#">你问我答</a></div>
<div class="tabvalue" style="display:none"><a href="#">帐户充值</a> ┆ <a href="#">帐户充值</a></div>
<div class="tabvalue" style="display:none"><a href="#">论坛首页</a> ┆ <a href="#">论坛搜索</a></div>
<div class="tabvalue" style="display:none"><a href="#">收 件 箱</a> ┆ <a href="#">会 客 室</a> ┆ <a href="#">小说书架</a> ┆ <a href="#">电子书书架</a> ┆ <a href="#">我的电子书</a> ┆ <a href="#">帐户冲值</a> ┆ <a href="#">申请作者</a> ┆ <a href="3">修改资料</a> ┆ <a href="#">会员列表</a> ┆ <a href="#">退出登录</a></div>
<div class="tabvalue" style="display:none"><a href="#">新建小说</a> ┆ <a href="#">我的小说</a> ┆ <a href="#">新建草稿</a> ┆ <a href="#">草 稿 箱</a> ┆ <a href="#">新建电子书</a> ┆ <a href="#">我的电子书</a> ┆ <a href="#">新建漫画</a> ┆ <a href="#">我的漫画</a></div>
<div class="tabvalue" style="display:none"><a href="#">网站管理</a> ┆ <a href="#">网站管理</a></div>
</div>
</div>

CSS样式如下：

*{margin:0px; padding:0px;}
body{font-size:12px; color:#333; line-height:22px; }
ul,li{ list-style-type:none;}
a{ color:#333; text-decoration:none;}
a:hover{color:#ff6600;}
#tab1{ margin:20px auto; width:980px; overflow:hidden;}
.tablist{float:left; background:url(images/img.jpg) no-repeat;}
.tablist li{ float:left; width:70px; text-align:center; height:38px; line-height:38px;}
.tablist li a{width:70px; display:inline; float:left; color:#fff; font-weight:bold;}
.tablist li a:hover{width:70px; display:inline; float:left; color:#ff6600; background:url(images/bk.gif) repeat-x;}
.selected{display:inline; float:left; color:#333 !important; background:url(images/bk.gif) repeat-x;}
.tabcontent{width:968px; height:32px; line-height:32px; padding-left:10px; color:#333; float:left; background:url(images/bk2.gif) repeat-x; border-left:solid 1px #ccc; border-right:solid 1px #ccc; border-bottom:solid 1px #ccc;}

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";
}
}