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

html代码如下：

<div id="tab1">
<div class="tablist">
<h5>小说推荐榜</h5>
<ul>
<li><font>1</font><a href="javascript:void(0)" onmouseover="selecttab(this)" class="selected">班花</a><span>12-25</span></li>
<div class="tabvalue">
<dl>
<dt><a href="#"><img src="images/preview1.jpg" /></a></dt>
<dd>老爸娶了个后妈，没料到却是我高中时的漂亮女班长，这下有好戏看了。 这个暑假老爸不在家，看来我要和我...</dd>
</dl>
</div>
<li><font>2</font><a href="javascript:void(0)" onmouseover="selecttab(this)">狙击英雄</a><span>12-21</span></li>
<div class="tabvalue" style="display:none">
<dl>
<dt><a href="#"><img src="images/preview2.jpg" /></a></dt>
<dd>志愿军总部和朝鲜最高人民会议授予特等功、二级英雄和一级国旗勋章。 这样的荣誉！ 英雄？ 当然是英雄！</dd>
</dl>
</div>
<li><font>3</font><a href="javascript:void(0)" onmouseover="selecttab(this)">九鼎记</a><span>12-28</span></li>
<div class="tabvalue" style="display:none">
<dl>
<dt><a href="#"><img src="images/preview3.jpg" /></a></dt>
<dd>滕家有儿，名青山！长枪所向，何人能挡？这是番茄的第五本小说。番茄的前四本小说有三本是修真仙侠类...</dd>
</dl>
</div>
<li><font>4</font><a href="javascript:void(0)" onmouseover="selecttab(this)">九阴九阳</a><span>12-28</span></li>
<div class="tabvalue" style="display:none">
<dl>
<dt><a href="#"><img src="images/preview3.jpg" /></a></dt>
<dd>
滕家有儿，名青山！长枪所向，何人能挡？这是番茄的第五本小说。番茄的前四本小说有三本是修真仙侠类...</dd>
</dl>
</div>
<li><font>5</font><a href="javascript:void(0)" onmouseover="selecttab(this)">宠霸美男</a><span>12-28</span></li>
<div class="tabvalue" style="display:none">
<dl>
<dt><a href="#"><img src="images/preview3.jpg" /></a></dt>
<dd>
滕家有儿，名青山！长枪所向，何人能挡？这是番茄的第五本小说。番茄的前四本小说有三本是修真仙侠类...</dd>
</dl>
</div>
<li><font>6</font><a href="javascript:void(0)" onmouseover="selecttab(this)">绿茵之王</a><span>12-28</span></li>
<div class="tabvalue" style="display:none">
<dl>
<dt><a href="#"><img src="images/preview3.jpg" /></a></dt>
<dd>滕家有儿，名青山！长枪所向，何人能挡？这是番茄的第五本小说。番茄的前四本小说有三本是修真仙侠类...</dd>
</dl>
</div>
<li><font>7</font><a href="javascript:void(0)" onmouseover="selecttab(this)">步步生莲</a><span>12-28</span></li>
<div class="tabvalue" style="display:none">
<dl>
<dt><a href="#"><img src="images/preview3.jpg" /></a></dt>
<dd>滕家有儿，名青山！长枪所向，何人能挡？这是番茄的第五本小说。番茄的前四本小说有三本是修真仙侠类...</dd>
</dl>
</div>
<li><font>8</font><a href="javascript:void(0)" onmouseover="selecttab(this)">妻定神闲</a><span>12-28</span></li>
<div class="tabvalue" style="display:none">
<dl>
<dt><a href="#"><img src="images/preview3.jpg" /></a></dt>
<dd>滕家有儿，名青山！长枪所向，何人能挡？这是番茄的第五本小说。番茄的前四本小说有三本是修真仙侠类...</dd>
</dl>
</div>
</ul>
</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:#FF0000;}
#tab1{ margin:20px auto; width:300px; overflow:hidden; border:solid 1px #6BB1DD;}
.tablist{float:left; overflow:hidden;}
h5{font-size:14px; padding-left:10px; color:#0065A5;
background:url(images/tl.gif) repeat-x; width:290px; height:28px; line-height:28px;
}
.tablist ul{padding:8px 10px 0px 10px;}
.tablist li{ width:280px; overflow:hidden; display:block;}
.tablist li a{float:left;}
.tablist li font{font-size:10px; float:left; color:#fff; margin:5px 5px 0px 0px;
width:13px; height:11px; line-height:11px; text-align:center; background:url(images/icon.gif) no-repeat;
font-family:Arial, Helvetica, sans-serif
}
.tablist li span{float:right; color:#939393;}
.tabvalue{ float:left; overflow:hidden; width:285px; border-bottom:dotted 1px #ccc; padding-bottom:6px;}
.tabvalue dt{width:56px; height:78px; float:left; padding:0px 10px 0px 0px;}
.tabvalue dt img{border:none; display:block;}
.tabvalue dd{float:left; width:210px;}

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").length > 1 ? obj.parentNode.parentNode.parentNode.parentNode.getElementsByTagName("div")[0].getElementsByTagName("div") : obj.parentNode.parentNode.parentNode.parentNode.getElementsByTagName("div")[0].getElementsByTagName("div");
for(i=0; i<contents.length; i++){
contents[i].style.display = i==n ? "block" : "none";
}
}
0