三种简洁的Tab导航（网页选项卡）简析
<p ><strong>easeman</strong> 发表于 2007-5-20 16:41</p>
<h3>三种简洁的Tab导航（网页选项卡）简析</h3>在网页中应用选项卡可以使网页显得更紧凑，结合AJAX技术可以使页面在有限的空间内展现更多的内容。本文主要介绍几种简洁的选项卡效果的实现（不涉及滑动门和AJAX），附有实例，无图片，兼容性较好，方便大家直接使用。
第一种形式: 通过更换显示样式实现，这种很常见，就不多说了。
<div id="tabs0">
<ul class="menu0" id="menu0">
<li onclick="setTab(0,0)" class="hover">新闻</li>
<li onclick="setTab(0,1)">评论</li>
<li onclick="setTab(0,2)">技术</li>
<li onclick="setTab(0,3)">点评</li>
</ul>
<div class="main" id="main0">
<ul class="block"><li>新闻列表</li></ul>
<ul><li>评论列表</li></ul>
<ul><li>技术列表</li></ul>
<ul><li>点评列表</li></ul>
</div>
</div>
第二种形式: 这种结构比较复杂一些，外面加一个相对层(.menu1box)，设置溢出隐藏，将选项卡(#menu1)设为绝对定位，设置层指针为1(z-index:1;)，以便可以遮住下主区块(.main1box)1px的高度。设置主区块的边框为1px的黑边，上空白(margin-top)为-1px，使上边框伸到选项卡下。当改变选项卡某项(li)的背景为白色时便可遮住一部分主区块的上边框。这样效果就实现了。
<div id="tabs1">
<div class="menu1box">
<ul id="menu1">
<li class="hover" onmouseover="setTab(1,0)"><a href="http://bbs.pqshow.com/#">新闻</a></li>
<li onmouseover="setTab(1,1)"><a href="http://bbs.pqshow.com/#">评论</a></li>
<li onmouseover="setTab(1,2)"><a href="http://bbs.pqshow.com/#">技术</a></li>
<li onmouseover="setTab(1,3)"><a href="http://bbs.pqshow.com/#">点评</a></li>
</ul>
</div>
<div class="main1box">
<div class="main" id="main1">
<ul class="block"><li>新闻列表</li></ul>
<ul><li>评论列表</li></ul>
<ul><li>技术列表</li></ul>
<ul><li>点评列表</li></ul>
</div>
</div>
</div>
第一、二种形式的JS代码:
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li"); /*获取选项卡的LI对象*/
var mli=document.getElementById("main"+m).getElementsByTagName("ul"); /*获取主显示区域对象*/
for(i=0;i<tli.length;i++){
tli.className=i==n?"hover":""; /*更改选项卡的LI对象的样式，如果是选定的项则使用.hover样式*/
mli.style.display=i==n?"block":"none"; /*确定主区域显示哪一个对象*/
}
}
第三种形式: 这也是一种不常用的方式，加一个相对层(.menu2box)，利用一个背景层(#tip2)定位，通过改变层的左距离(left)实现效果。
<div id="tabs2">
<div class="menu2box">
<div id="tip2"></div>
<ul id="menu2">
<li class="hover" onmouseover="nowtab(2,0)"><a href="http://bbs.pqshow.com/#">新闻</a></li>
<li onmouseover="nowtab(2,1)"><a href="http://bbs.pqshow.com/#">评论</a></li>
<li onmouseover="nowtab(2,2)"><a href="http://bbs.pqshow.com/#">技术</a></li>
<li onmouseover="nowtab(2,3)"><a href="http://bbs.pqshow.com/#">点评</a></li>
</ul>
</div>
<div class="main" id="main2">
新闻内容
</div>
</div>
效果演示：
<!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>简洁Tab</title>
<style type="text/css">
<!--
body,div,ul,li{
margin:0 auto;
padding:0;
}
body{
font:12px "宋体";
text-align:center;
}
a:link{
color:#00F;
text-decoration:none;
}
a:visited {
color: #00F;
text-decoration:none;
}
a:hover {
color: #c00;
text-decoration:underline;
}
ul{
list-style:none;
}
.main{
clear:both;
padding:8px;
text-align:center;
}
/*第一种形式*/
#tabs0 {
height: 200px;
width: 400px;
border: 1px solid #cbcbcb;
background-color: #f2f6fb;
}
.menu0{
width: 400px;
}
.menu0 li{
display:block;
float: left;
padding: 4px 0;
width:100px;
text-align: center;
cursor:pointer;
background: #FFFFff;
}
.menu0 li.hover{
background: #f2f6fb;
}
#main0 ul{
display: none;
}
#main0 ul.block{
display: block;
}
/*第二种形式*/
#tabs1{
text-align:left;
width:400px;
}
.menu1box{
position:relative;
overflow:hidden;
height:22px;
width:400px;
text-align:left;
}
#menu1{
position:absolute;
top:0;
left:0;
z-index:1;
}
#menu1 li{
float:left;
display:block;
cursor:pointer;
width:72px;
text-align:center;
line-height:21px;
height:21px;
}
#menu1 li.hover{
background:#fff;
border-left:1px solid #333;
border-top:1px solid #333;
border-right:1px solid #333;
}
.main1box{
clear:both;
margin-top:-1px;
border:1px solid #333;
height:181px;
width:400px;
}
#main1 ul{
display: none;
}
#main1 ul.block{
display: block;
}
/*第三种形式*/
.menu2box{
position:relative;
overflow:hidden;
height:22px;
width:400px;
text-align:left;
background: #FFFFff;
}
#tabs2 {
height: 200px;
width: 400px;
border: 1px solid #cbcbcb;
background-color: #f2f6fb;
}
#tip2{
position:absolute;
top:0;
left:0;
height:22px;
line-height:22px;
z-index:0;
width:100px;
background: #f2f6fb;
}
#menu2{
position:absolute;
top:0;
left:0;
z-index:1;
}
#menu2 li{
display:block;
float: left;
padding: 4px 0;
width:100px;
text-align: center;
cursor:pointer;
}
-->
</style>
<script>
<!--
/*第一种形式 第二种形式 更换显示样式*/
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli.className=i==n?"hover":"";
mli.style.display=i==n?"block":"none";
}
}
/*第三种形式 利用一个背景层定位*/
var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
function nowtab(m,n){
if(n!=0&&m3=="")m3=document.getElementById("main2").innerHTML;
document.getElementById("tip"+m).style.left=n*100+'px';
document.getElementById("main2").innerHTML=m3;
}
//-->
</script>
</head>
<body>
<!--第一种形式-->
<div id="tabs0">
<ul class="menu0" id="menu0">
<li onclick="setTab(0,0)" class="hover">新闻</li>
<li onclick="setTab(0,1)">评论</li>
<li onclick="setTab(0,2)">技术</li>
<li onclick="setTab(0,3)">点评</li>
</ul>
<div class="main" id="main0">
<ul class="block"><li>新闻列表</li></ul>
<ul><li>评论列表</li></ul>
<ul><li>技术列表</li></ul>
<ul><li>点评列表</li></ul>
</div>
</div>
<!--第二种形式-->
<div id="tabs1">
<div class="menu1box">
<ul id="menu1">
<li class="hover" onmouseover="setTab(1,0)"><a href="http://bbs.pqshow.com/#">新闻</a></li>
<li onmouseover="setTab(1,1)"><a href="http://bbs.pqshow.com/#">评论</a></li>
<li onmouseover="setTab(1,2)"><a href="http://bbs.pqshow.com/#">技术</a></li>
<li onmouseover="setTab(1,3)"><a href="http://bbs.pqshow.com/#">点评</a></li>
</ul>
</div>
<div class="main1box">
<div class="main" id="main1">
<ul class="block"><li>新闻列表</li></ul>
<ul><li>评论列表</li></ul>
<ul><li>技术列表</li></ul>
<ul><li>点评列表</li></ul>
</div>
</div>
</div>
<!--第三种形式-->
<div id="tabs2">
<div class="menu2box">
<div id="tip2"></div>
<ul id="menu2">
<li class="hover" onmouseover="nowtab(2,0)"><a href="http://bbs.pqshow.com/#">新闻</a></li>
<li onmouseover="nowtab(2,1)"><a href="http://bbs.pqshow.com/#">评论</a></li>
<li onmouseover="nowtab(2,2)"><a href="http://bbs.pqshow.com/#">技术</a></li>
<li onmouseover="nowtab(2,3)"><a href="http://bbs.pqshow.com/#">点评</a></li>
</ul>
</div>
<div class="main" id="main2">
新闻内容
</div>
</div>
</body>
</html>
[ 本帖最后由 easeman 于 2007-5-20 17:32 编辑 ]<p ><strong>Sheneyan</strong> 发表于 2007-5-20 18:31</p>
简析……果然是简析:D，感觉有点意犹未尽。
希望下次看到更多好东东<p ><strong>reterry</strong> 发表于 2007-5-20 19:23</p>
真不错啊，好东西啊<p ><strong>keysarjan</strong> 发表于 2007-5-21 12:49</p>
真是谢谢楼主啊，我喜欢你的帖子<p ><strong>dwcli</strong> 发表于 2007-5-21 12:55</p>
不错~顶<p ><strong>weiwater</strong> 发表于 2007-5-21 13:17</p>
真是好东西，谢谢楼主！！！<p ><strong>wjsl</strong> 发表于 2007-5-21 13:40</p>
http://bbs.blueidea.com/viewthread.php?tid=2747202&highlight=
看过这片是否有所发现,
不可断定是...:D :D
<script>
<!--
/*第一种形式 第二种形式 更换显示样式*/
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli.className=i==n?"hover":"";
mli.style.display=i==n?"block":"none";
}
}
/*第三种形式 利用一个背景层定位*/
var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
function nowtab(m,n){
if(n!=0&&m3=="")m3=document.getElementById("main2").innerHTML;
document.getElementById("tip"+m).style.left=n*100+'px';
document.getElementById("main2").innerHTML=m3;
}
//-->
</script>
<script language="JavaScript" type="text/javascript">
//横型菜单
var B=document.getElementById("span").getElementsByTagName("span")
var E=document.getElementById("cap").getElementsByTagName("tr")
for(var i=0;i<B.length;i++){
B.onmouseover=function(){this.style.cursor="pointer"; }
B.onclick=function(){this.title=1
for(var f=1;f<E.length;f++)E.style.display="none"
for(var e=0;e<B.length;e++){
B.style.backgroundColor="#3399CC"
this.style.backgroundColor="#3333CC"
if(B.title==1)
if(E.style.display=="")E.style.display="none"
else E.style.display=""}
this.title=0
}
}
</script>
[ 本帖最后由 wjsl 于 2007-5-21 13:41 编辑 ]<p ><strong>webdesigning</strong> 发表于 2007-5-21 13:42</p>
ls什么意思？<p ><strong>hope822</strong> 发表于 2007-5-21 13:53</p>
比较详细，支持！<p ><strong>easeman</strong> 发表于 2007-5-21 16:40</p>
<h3>回复 #7 wjsl 的帖子</h3>有何高见,这段代码有什么问题吗?<p ><strong>stiub</strong> 发表于 2007-5-21 20:47</p>
<pre><code><SCRIPT LANGUAGE="JavaScript">
<!--//
function Appear(target_div,other_div1,other_div2)
{
target_div.style.display="block";
other_div1.style.display="none";
other_div2.style.display="none";
}
//-->
</SCRIPT></code>
</pre><p ><strong>jiqinggu</strong> 发表于 2007-5-22 11:33</p>
不错，支持fox<p ><strong>xingesoft</strong> 发表于 2007-5-22 15:17</p>
ajax最简单的应用：http://www.sysapi.com//test/ajax2/test.htm（有下载）<p ><strong>vipbaidu</strong> 发表于 2007-5-29 16:55</p>
真不错啊，好东西啊<p ><strong>zcfg</strong> 发表于 2007-5-29 21:42</p>
感谢楼主分享!!如果能把setTab()函数与7楼的this语句结合会更好<p ><strong>bbdd2008</strong> 发表于 2007-5-29 22:30</p>
高手<p ><strong>Deno</strong> 发表于 2007-6-6 11:30</p>
支持一下``<p ><strong>xiaotie</strong> 发表于 2007-6-6 13:14</p>
顶一下，虽说看不懂，先收藏再慢慢研究。<p ><strong>usming</strong> 发表于 2007-8-20 10:56</p>
收藏了:)<p ><strong>lao7</strong> 发表于 2007-8-20 11:20</p>
收藏慢慢看，漫漫学习<p ><strong>sun139</strong> 发表于 2007-8-20 11:31</p>
是蛮好的.如果不定下也枉路过了,
不能留下什么留下点口水:)<p ><strong>banaeib</strong> 发表于 2007-8-21 15:36</p>
强！！！！有空学习一下<p ><strong>reveriesea</strong> 发表于 2007-8-21 16:10</p>
有空学习一下!<p ><strong>jack99majia</strong> 发表于 2007-8-21 16:40</p>
挺简洁的<p ><strong>MrShan</strong> 发表于 2007-8-22 00:29</p>
学习ing，太棒了，收藏，哈哈！<p ><strong>holyli</strong> 发表于 2007-8-22 08:44</p>
真是谢谢楼主啊，我喜欢你的帖子<p ><strong>RobinQu</strong> 发表于 2007-8-23 17:39</p>
还可以直接用JS访问CSS属性改变DIV的Display属性......<p ><strong>asdfgasdfg1</strong> 发表于 2007-8-23 20:25</p>
谢谢LZ<p ><strong>Number2</strong> 发表于 2007-8-24 11:22</p>
第二个效果，菜单因为多了边框位置有向下移动<p ><strong>olly3000</strong> 发表于 2007-8-24 11:31</p>
最近正在找这方面的资料，不想在此得到，感谢下楼主的贡献！<p ><strong>olly3000</strong> 发表于 2007-8-24 20:27</p>
哈哈，终于明白第二个样式的效果的原理了，原来是取决与这个呀：
margin-top:-1px;
这个-1是关键的数值，巧妙的把标签栏下的原始横线黑隐藏了，真是妙啊！<p ><strong>fengdan</strong> 发表于 2007-8-25 12:43</p>
非常简洁,收藏先.
谢谢分享!<p ><strong>goodzhaozq</strong> 发表于 2007-8-25 13:25</p>
收藏了，正好要用，呵呵，谢谢楼主<p ><strong>lzhh</strong> 发表于 2007-8-27 11:41</p>
很好，采用了,谢谢楼主<p ><strong>anniexing</strong> 发表于 2007-8-27 11:49</p>
好东西，收藏了，谢谢楼主<p ><strong>cszcsz1357</strong> 发表于 2007-8-30 13:27</p>
不错.谢谢分享<p ><strong>Slvin</strong> 发表于 2007-8-30 17:07</p>
留名，谢谢<p ><strong>liaoqy</strong> 发表于 2007-8-30 17:14</p>
楼主，你太强了，真简洁啊<p ><strong>vivim</strong> 发表于 2007-8-31 14:52</p>
收了。谢谢LZ<p ><strong>cl2006</strong> 发表于 2007-8-31 14:57</p>
果然简洁啊 支持一下<p ><strong>winhero_charles</strong> 发表于 2007-8-31 20:22</p>
后悔来得太迟啦<p ><strong>yolio2003</strong> 发表于 2007-9-17 15:35</p>
好厉害
这个代码是我见过最简洁的了<p ><strong>xkang</strong> 发表于 2007-9-17 19:17</p>
太感谢了，我喜欢<p ><strong>9skylark</strong> 发表于 2007-9-17 19:43</p>
收藏！书读百遍，其意自见。<p ><strong>EVA01</strong> 发表于 2007-9-18 10:51</p>
真的很不错啊。感谢楼主的分享。拿来学习，呵呵~<p ><strong>berain</strong> 发表于 2007-9-30 17:54</p>
一直不明白，
好像这类的导航，一般在IE都很流畅。
但在火狐里，鼠标移动快点的话，总觉得有点拖滞的。
不明白，高手赐教。。<p ><strong>berain</strong> 发表于 2007-10-7 17:56</p>
我在第二种形式#menu1 li { }里加上了边框border:1px solid black;把下面的main边框颜色改为蓝色,效果如下:
<!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>简洁Tab</title>
<style type="text/css">
<!--
body,div,ul,li{
margin:0 auto;
padding:0;
}
body{
font:12px "宋体";
text-align:center;
}
a:link{
color:#00F;
text-decoration:none;
}
a:visited {
color: #00F;
text-decoration:none;
}
a:hover {
color: #c00;
text-decoration:underline;
}
ul{
list-style:none;
}
.main{
clear:both;
padding:8px;
text-align:center;
}
/*第一种形式*/
#tabs0 {
height: 200px;
width: 400px;
border: 1px solid #cbcbcb;
background-color: #f2f6fb;
}
.menu0{
width: 400px;
}
.menu0 li{
display:block;
float: left;
padding: 4px 0;
width:100px;
text-align: center;
cursor:pointer;
background: #FFFFff;
}
.menu0 li.hover{
background: #f2f6fb;
}
#main0 ul{
display: none;
}
#main0 ul.block{
display: block;
}
/*第二种形式*/
#tabs1{
text-align:left;
width:400px;
}
.menu1box{
position:relative;
overflow:hidden;
height:22px;
width:400px;
text-align:left;
}
#menu1{
position:absolute;
top:0;
left:0;
z-index:1;
}
#menu1 li{
float:left;
display:block;
cursor:pointer;
width:72px;
text-align:center;
line-height:21px;
height:21px;
border:1px solid black;
}
#menu1 li.hover{
background:#fff;
border-left:1px solid #333;
border-top:1px solid #333;
border-right:1px solid #333;
}
.main1box{
clear:both;
margin-top:-1px;
border:1px solid blue;
height:181px;
width:400px;
}
#main1 ul{
display: none;
}
#main1 ul.block{
display: block;
}
/*第三种形式*/
.menu2box{
position:relative;
overflow:hidden;
height:22px;
width:400px;
text-align:left;
background: #FFFFff;
}
#tabs2 {
height: 200px;
width: 400px;
border: 1px solid #cbcbcb;
background-color: #f2f6fb;
}
#tip2{
position:absolute;
top:0;
left:0;
height:22px;
line-height:22px;
z-index:0;
width:100px;
background: #f2f6fb;
}
#menu2{
position:absolute;
top:0;
left:0;
z-index:1;
}
#menu2 li{
display:block;
float: left;
padding: 4px 0;
width:100px;
text-align: center;
cursor:pointer;
}
-->
</style>
<script>
<!--
/*第一种形式 第二种形式 更换显示样式*/
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli.className=i==n?"hover":"";
mli.style.display=i==n?"block":"none";
}
}
/*第三种形式 利用一个背景层定位*/
var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
function nowtab(m,n){
if(n!=0&&m3=="")m3=document.getElementById("main2").innerHTML;
document.getElementById("tip"+m).style.left=n*100+'px';
document.getElementById("main2").innerHTML=m3;
}
//-->
</script>
</head>
<body>
<!--第一种形式-->
<div id="tabs0">
<ul class="menu0" id="menu0">
<li onclick="setTab(0,0)" class="hover">新闻</li>
<li onclick="setTab(0,1)">评论</li>
<li onclick="setTab(0,2)">技术</li>
<li onclick="setTab(0,3)">点评</li>
</ul>
<div class="main" id="main0">
<ul class="block"><li>新闻列表</li></ul>
<ul><li>评论列表</li></ul>
<ul><li>技术列表</li></ul>
<ul><li>点评列表</li></ul>
</div>
</div>
<!--第二种形式-->
<div id="tabs1">
<div class="menu1box">
<ul id="menu1">
<li class="hover" onmouseover="setTab(1,0)"><a href="http://bbs.pqshow.com/#">新闻</a></li>
<li onmouseover="setTab(1,1)"><a href="http://bbs.pqshow.com/#">评论</a></li>
<li onmouseover="setTab(1,2)"><a href="http://bbs.pqshow.com/#">技术</a></li>
<li onmouseover="setTab(1,3)"><a href="http://bbs.pqshow.com/#">点评</a></li>
</ul>
</div>
<div class="main1box">
<div class="main" id="main1">
<ul class="block"><li>新闻列表</li></ul>
<ul><li>评论列表</li></ul>
<ul><li>技术列表</li></ul>
<ul><li>点评列表</li></ul>
</div>
</div>
</div>
<!--第三种形式-->
<div id="tabs2">
<div class="menu2box">
<div id="tip2"></div>
<ul id="menu2">
<li class="hover" onmouseover="nowtab(2,0)"><a href="http://bbs.pqshow.com/#">新闻</a></li>
<li onmouseover="nowtab(2,1)"><a href="http://bbs.pqshow.com/#">评论</a></li>
<li onmouseover="nowtab(2,2)"><a href="http://bbs.pqshow.com/#">技术</a></li>
<li onmouseover="nowtab(2,3)"><a href="http://bbs.pqshow.com/#">点评</a></li>
</ul>
</div>
<div class="main" id="main2">
新闻内容
</div>
</div>
</body>
</html>
然后我在第二种形式#menu1 li { }里再加上了背景：background-color:white;效果如下:
<!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>简洁Tab</title>
<style type="text/css">
<!--
body,div,ul,li{
margin:0 auto;
padding:0;
}
body{
font:12px "宋体";
text-align:center;
}
a:link{
color:#00F;
text-decoration:none;
}
a:visited {
color: #00F;
text-decoration:none;
}
a:hover {
color: #c00;
text-decoration:underline;
}
ul{
list-style:none;
}
.main{
clear:both;
padding:8px;
text-align:center;
}
/*第一种形式*/
#tabs0 {
height: 200px;
width: 400px;
border: 1px solid #cbcbcb;
background-color: #f2f6fb;
}
.menu0{
width: 400px;
}
.menu0 li{
display:block;
float: left;
padding: 4px 0;
width:100px;
text-align: center;
cursor:pointer;
background: #FFFFff;
}
.menu0 li.hover{
background: #f2f6fb;
}
#main0 ul{
display: none;
}
#main0 ul.block{
display: block;
}
/*第二种形式*/
#tabs1{
text-align:left;
width:400px;
}
.menu1box{
position:relative;
overflow:hidden;
height:22px;
width:400px;
text-align:left;
}
#menu1{
position:absolute;
top:0;
left:0;
z-index:1;
}
#menu1 li{
float:left;
display:block;
cursor:pointer;
width:72px;
text-align:center;
line-height:21px;
height:21px;
border:1px solid black;
background-color:white;
}
#menu1 li.hover{
background:#fff;
border-left:1px solid #333;
border-top:1px solid #333;
border-right:1px solid #333;
}
.main1box{
clear:both;
margin-top:-1px;
border:1px solid blue;
height:181px;
width:400px;
}
#main1 ul{
display: none;
}
#main1 ul.block{
display: block;
}
/*第三种形式*/
.menu2box{
position:relative;
overflow:hidden;
height:22px;
width:400px;
text-align:left;
background: #FFFFff;
}
#tabs2 {
height: 200px;
width: 400px;
border: 1px solid #cbcbcb;
background-color: #f2f6fb;
}
#tip2{
position:absolute;
top:0;
left:0;
height:22px;
line-height:22px;
z-index:0;
width:100px;
background: #f2f6fb;
}
#menu2{
position:absolute;
top:0;
left:0;
z-index:1;
}
#menu2 li{
display:block;
float: left;
padding: 4px 0;
width:100px;
text-align: center;
cursor:pointer;
}
-->
</style>
<script>
<!--
/*第一种形式 第二种形式 更换显示样式*/
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli.className=i==n?"hover":"";
mli.style.display=i==n?"block":"none";
}
}
/*第三种形式 利用一个背景层定位*/
var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
function nowtab(m,n){
if(n!=0&&m3=="")m3=document.getElementById("main2").innerHTML;
document.getElementById("tip"+m).style.left=n*100+'px';
document.getElementById("main2").innerHTML=m3;
}
//-->
</script>
</head>
<body>
<!--第一种形式-->
<div id="tabs0">
<ul class="menu0" id="menu0">
<li onclick="setTab(0,0)" class="hover">新闻</li>
<li onclick="setTab(0,1)">评论</li>
<li onclick="setTab(0,2)">技术</li>
<li onclick="setTab(0,3)">点评</li>
</ul>
<div class="main" id="main0">
<ul class="block"><li>新闻列表</li></ul>
<ul><li>评论列表</li></ul>
<ul><li>技术列表</li></ul>
<ul><li>点评列表</li></ul>
</div>
</div>
<!--第二种形式-->
<div id="tabs1">
<div class="menu1box">
<ul id="menu1">
<li class="hover" onmouseover="setTab(1,0)"><a href="http://bbs.pqshow.com/#">新闻</a></li>
<li onmouseover="setTab(1,1)"><a href="http://bbs.pqshow.com/#">评论</a></li>
<li onmouseover="setTab(1,2)"><a href="http://bbs.pqshow.com/#">技术</a></li>
<li onmouseover="setTab(1,3)"><a href="http://bbs.pqshow.com/#">点评</a></li>
</ul>
</div>
<div class="main1box">
<div class="main" id="main1">
<ul class="block"><li>新闻列表</li></ul>
<ul><li>评论列表</li></ul>
<ul><li>技术列表</li></ul>
<ul><li>点评列表</li></ul>
</div>
</div>
</div>
<!--第三种形式-->
<div id="tabs2">
<div class="menu2box">
<div id="tip2"></div>
<ul id="menu2">
<li class="hover" onmouseover="nowtab(2,0)"><a href="http://bbs.pqshow.com/#">新闻</a></li>
<li onmouseover="nowtab(2,1)"><a href="http://bbs.pqshow.com/#">评论</a></li>
<li onmouseover="nowtab(2,2)"><a href="http://bbs.pqshow.com/#">技术</a></li>
<li onmouseover="nowtab(2,3)"><a href="http://bbs.pqshow.com/#">点评</a></li>
</ul>
</div>
<div class="main" id="main2">
新闻内容
</div>
</div>
</body>
</html>
为什么第一个效果标签栏加了边框，不会把下面"main”的边框线遮住，要等到加了背景色之后，才会把下面"main”的边框线遮住呢？是不是默认背景是透明的?<p ><strong>feelin7</strong> 发表于 2007-10-7 18:04</p>
有通用函数就好了<p ><strong>erick111</strong> 发表于 2007-10-7 18:27</p>
<h3>回复 #13 xingesoft 的帖子</h3>请问这里有个getDate.php的文件，我从数据库中得到分类的相应内容怎么才能放的这个页面上去呢？能不能给个例子，谢谢<p ><strong>btpig</strong> 发表于 2007-10-8 11:14</p>
这个经典。。。收藏<p ><strong>jsw0528</strong> 发表于 2007-10-8 14:59</p>
方便大家直接使用
楼主真周到<p ><strong>sk0219</strong> 发表于 2007-10-8 15:12</p>
同意楼上<p ><strong>0987</strong> 发表于 2007-10-8 16:08</p>
如果加程序上去，怎么加？<p ><strong>TottyAndBaty</strong> 发表于 2007-10-8 16:28</p>
这个很好！我以前一直在别人的网页中抠这个代码，但是我用DW9之后，那个东东可以很轻松的做出来！而且还可添加和删除<p ><strong>chenn</strong> 发表于 2007-10-8 17:08</p>
学习了，谢谢<p ><strong>xxyan</strong> 发表于 2007-10-21 16:22</p>
正在找这方面的资料多谢楼主<p ><strong>iouso</strong> 发表于 2007-10-21 16:53</p>
<h3>回复 #1 easeman 的帖子</h3>终于看见了，一直找……<p ><strong>jiayan41</strong> 发表于 2007-10-22 01:29</p>
很简洁，够全了，收藏<p ><strong>Quicklyyu</strong> 发表于 2007-12-21 11:45</p>
<h3>知道的晚点了……</h3>原帖由 winhero_charles 于 2007-8-31 20:22 发表 http://bbs.blueidea.com/images/common/back.gif
后悔来得太迟啦
恕我学浅，里面的标题列表如何实现？我觉得最好能够达到滚动播出的效果<p ><strong>yccl</strong> 发表于 2007-12-21 16:13</p>
不错啊，收藏起来，以后用得了
继续支持没话说~ 楼主真强
页:
[1]