DIV结构如下:
│body {} /*这是一个HTML元素*/
└# tab1 {} /*页面层容器*/
├. tablist {} /*标题栏目*/
├. tabcontent {} /*页面内容*/
html代码如下:
<div id="tab1"><h5>小说推荐榜</h5>
<div class="tablist">
<ul>
<li><a href="javascript:void(0)" onmouseover="selecttab(this)" class="selected"><font>1 班花</font></a>
<div class="tabvalue">
<dl>
<dt><span>1</span><a href="#"><img src="images/preview1.jpg" /></a></dt>
<dd><h4>班花</h4>作者:唐家三少
分类:玄幻小说
推荐:182</dd>
</dl>
</div>
</li>
<li><a href="javascript:void(0)" onmouseover="selecttab(this)"><font>2 狙击英雄</font></a>
<div class="tabvalue" style="display:none">
<dl>
<dt><span>2</span><a href="#"><img src="images/preview2.jpg" /></a></dt>
<dd><h4>狙击英雄</h4>作者:唐家三少
分类:玄幻小说
推荐:182</dd>
</dl>
</div>
</li>
<li><a href="javascript:void(0)" onmouseover="selecttab(this)"><font>3 九鼎记</font></a>
<div class="tabvalue" style="display:none">
<dl>
<dt><span>3</span><a href="#"><img src="images/preview3.jpg" /></a></dt>
<dd><h4>九鼎记</h4>作者:唐家三少
分类:玄幻小说
推荐:182</dd>
</dl>
</div>
</li>
<li><a href="javascript:void(0)" onmouseover="selecttab(this)"><font>4 贼胆</font></a>
<div class="tabvalue" style="display:none">
<dl>
<dt><span>4</span><a href="#"><img src="images/preview4.jpg" /></a></dt>
<dd><h4>贼胆</h4>作者:唐家三少
分类:玄幻小说
推荐:182</dd>
</dl>
</div>
</li>
<li><a href="javascript:void(0)" onmouseover="selecttab(this)"><font>5 猎国</font></a>
<div class="tabvalue" style="display:none">
<dl>
<dt><span>5</span><a href="#"><img src="images/preview5.jpg" /></a></dt>
<dd><h4>猎国</h4>作者:唐家三少
分类:玄幻小说
推荐:182</dd>
</dl>
</div>
</li>
<li><a href="javascript:void(0)" onmouseover="selecttab(this)"><font>6 大魔王</font></a>
<div class="tabvalue" style="display:none">
<dl>
<dt><span>6</span><a href="#"><img src="images/preview3.jpg" /></a></dt>
<dd><h4>大魔王</h4>作者:唐家三少
分类:玄幻小说
推荐:182</dd>
</dl>
</div>
</li>
<li><a href="javascript:void(0)" onmouseover="selecttab(this)"><font>7 斗破苍穹</font></a>
<div class="tabvalue" style="display:none">
<dl>
<dt><span>7</span><a href="#"><img src="images/preview4.jpg" /></a></dt>
<dd><h4>斗破苍穹</h4>作者:唐家三少
分类:玄幻小说
推荐:182</dd>
</dl>
</div>
</li>
<li><a href="javascript:void(0)" onmouseover="selecttab(this)"><font>8 王牌进化</font></a>
<div class="tabvalue" style="display:none">
<dl>
<dt><span>8</span><a href="#"><img src="images/preview5.jpg" /></a></dt>
<dd><h4>王牌进化</h4>作者:唐家三少
分类:玄幻小说
推荐:182</dd>
</dl>
</div>
</li>
</ul>
</div>
</div>
CSS样式如下:
*{margin:0px; padding:0px;}body{font-size:12px; color:#333; line-height:18px; }
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{overflow:hidden; padding:0px; width:300px;}
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{margin:0px 10px;}
.tablist li{width:280px; border-bottom:dotted 1px #ccc; overflow:hidden; padding:2px 0px;}
.tablist li a.selected{display:none;}
.tablist li font{font-size:12px; font-family:Arial, Helvetica, sans-serif;}
.tabvalue{overflow:hidden; margin:0px; padding:5px 0px;}
.tabvalue dt{width:73px; float:left; padding-right:8px;}
.tabvalue dt img{border:none; float:left; width:56px; height:78px;}
.tabvalue dt span{font-size:22px; font-weight:bold; float:left; display:block;
font-family:Arial, Helvetica, sans-serif; color:#BD0102; line-height:78px; padding-right:5px;
}
.tabvalue dd{float:left; width:185px; overflow:hidden;}
h4{font-size:12px;color:#BD0102;}
.tablist1 ul{padding:0px; margin:0px; border:solid 1px #ff0000; width:300px;}
.tablist1 li{ width:280px; border:solid 1px #00ff00;margin:0px;}
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";
}
}