标签页
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0052)http://www.sharejs.com/code/windows/tab3/index.html -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>三种简洁的Tab导航（网页选项卡）简析 - 分享JavaScript-sharejs.com</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>BODY {
PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
DIV {
PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
UL {
PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
LI {
PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
BODY {
TEXT-ALIGN: center; FONT: 12px "宋体"
}
A:link {
COLOR: #00f; TEXT-DECORATION: none
}
A:visited {
COLOR: #00f; TEXT-DECORATION: none
}
A:hover {
COLOR: #c00; TEXT-DECORATION: underline
}
UL {
LIST-STYLE-TYPE: none
}
.main {
TEXT-ALIGN: center; PADDING-BOTTOM: 8px; PADDING-LEFT: 8px; PADDING-RIGHT: 8px; CLEAR: both; PADDING-TOP: 8px
}
#tabs0 {
BORDER-BOTTOM: #cbcbcb 1px solid; BORDER-LEFT: #cbcbcb 1px solid; BACKGROUND-COLOR: #f2f6fb; WIDTH: 400px; HEIGHT: 200px; BORDER-TOP: #cbcbcb 1px solid; BORDER-RIGHT: #cbcbcb 1px solid
}
.menu0 {
WIDTH: 400px
}
.menu0 LI {
TEXT-ALIGN: center; PADDING-BOTTOM: 4px; PADDING-LEFT: 0px; WIDTH: 100px; PADDING-RIGHT: 0px; DISPLAY: block; BACKGROUND: #ffffff; FLOAT: left; CURSOR: pointer; PADDING-TOP: 4px
}
.menu0 LI.hover {
BACKGROUND: #f2f6fb
}
#main0 UL {
DISPLAY: none
}
#main0 UL.block {
DISPLAY: block
}
#tabs1 {
TEXT-ALIGN: left; WIDTH: 400px
}
.menu1box {
POSITION: relative; TEXT-ALIGN: left; WIDTH: 400px; HEIGHT: 22px; OVERFLOW: hidden
}
#menu1 {
Z-INDEX: 1; POSITION: absolute; TOP: 0px; LEFT: 0px
}
#menu1 LI {
TEXT-ALIGN: center; LINE-HEIGHT: 21px; WIDTH: 72px; DISPLAY: block; FLOAT: left; HEIGHT: 21px; CURSOR: pointer
}
#menu1 LI.hover {
BORDER-LEFT: #333 1px solid; BACKGROUND: #fff; BORDER-TOP: #333 1px solid; BORDER-RIGHT: #333 1px solid
}
.main1box {
BORDER-BOTTOM: #333 1px solid; BORDER-LEFT: #333 1px solid; MARGIN-TOP: -1px; WIDTH: 400px; HEIGHT: 181px; CLEAR: both; BORDER-TOP: #333 1px solid; BORDER-RIGHT: #333 1px solid
}
#main1 UL {
DISPLAY: none
}
#main1 UL.block {
DISPLAY: block
}
.menu2box {
POSITION: relative; TEXT-ALIGN: left; WIDTH: 400px; BACKGROUND: #ffffff; HEIGHT: 22px; OVERFLOW: hidden
}
#tabs2 {
BORDER-BOTTOM: #cbcbcb 1px solid; BORDER-LEFT: #cbcbcb 1px solid; BACKGROUND-COLOR: #f2f6fb; WIDTH: 400px; HEIGHT: 200px; BORDER-TOP: #cbcbcb 1px solid; BORDER-RIGHT: #cbcbcb 1px solid
}
#tip2 {
Z-INDEX: 0; POSITION: absolute; LINE-HEIGHT: 22px; WIDTH: 100px; BACKGROUND: #f2f6fb; HEIGHT: 22px; TOP: 0px; LEFT: 0px
}
#menu2 {
Z-INDEX: 1; POSITION: absolute; TOP: 0px; LEFT: 0px
}
#menu2 LI {
TEXT-ALIGN: center; PADDING-BOTTOM: 4px; PADDING-LEFT: 0px; WIDTH: 100px; PADDING-RIGHT: 0px; DISPLAY: block; FLOAT: left; CURSOR: pointer; PADDING-TOP: 4px
}
</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[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
/*第三种形式 利用一个背景层定位*/
var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
function nowtab(m,n){
if(n!=0 && m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;
document.getElementById("tip"+m).style.left=n*100+'px';
document.getElementById("main2").innerHTML=m3[n];
}
//-->
</SCRIPT>
<META name=GENERATOR content="MSHTML 8.00.7600.16625"></HEAD>
<BODY><BR><BR><!--第一种形式-->
<DIV id=tabs0>
<UL id=menu0 class=menu0>
<LI class=hover onclick=setTab(0,0)>新闻 </LI>
<LI onclick=setTab(0,1)>评论 </LI>
<LI onclick=setTab(0,2)>技术 </LI>
<LI onclick=setTab(0,3)>点评 </LI></UL>
<DIV id=main0 class=main>
<UL class=block>
<LI>新闻列表</LI></UL>
<UL>
<LI>评论列表</LI></UL>
<UL>
<LI>技术列表</LI></UL>
<UL>
<LI>点评列表</LI></UL></DIV></DIV><BR><BR><!--第二种形式-->
<DIV id=tabs1>
<DIV class=menu1box>
<UL id=menu1>
<LI class=hover onmouseover=setTab(1,0)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">新闻</A> </LI>
<LI onmouseover=setTab(1,1)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">评论</A> </LI>
<LI onmouseover=setTab(1,2)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">技术</A> </LI>
<LI onmouseover=setTab(1,3)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">点评</A>
</LI></UL></DIV>
<DIV class=main1box>
<DIV id=main1 class=main>
<UL class=block>
<LI>新闻列表</LI></UL>
<UL>
<LI>评论列表</LI></UL>
<UL>
<LI>技术列表</LI></UL>
<UL>
<LI>点评列表</LI></UL></DIV></DIV></DIV><BR><BR><!--第三种形式-->
<DIV id=tabs2>
<DIV class=menu2box>
<DIV id=tip2></DIV>
<UL id=menu2>
<LI class=hover onmouseover=nowtab(2,0)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">新闻</A> </LI>
<LI onmouseover=nowtab(2,1)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">评论</A> </LI>
<LI onmouseover=nowtab(2,2)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">技术</A> </LI>
<LI onmouseover=nowtab(2,3)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">点评</A>
</LI></UL></DIV>
<DIV id=main2 class=main>新闻内容 </DIV></DIV><BR><BR>
<DIV align=center>
<SCRIPT language=javascript
src="三种简洁的Tab导航（网页选项卡）简析%20-%20分享JavaScript-sharejs_com_files/720.js"></SCRIPT>
<BR><BR>获取更多JavaScript代码，请登录JavaScript分享网 <A
href="http://www.sharejs.com/">http://www.sharejs.com/</A> </DIV></BODY></HTML>
<!-- saved from url=(0052)http://www.sharejs.com/code/windows/tab3/index.html -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>三种简洁的Tab导航（网页选项卡）简析 - 分享JavaScript-sharejs.com</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>BODY {
PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
DIV {
PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
UL {
PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
LI {
PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
BODY {
TEXT-ALIGN: center; FONT: 12px "宋体"
}
A:link {
COLOR: #00f; TEXT-DECORATION: none
}
A:visited {
COLOR: #00f; TEXT-DECORATION: none
}
A:hover {
COLOR: #c00; TEXT-DECORATION: underline
}
UL {
LIST-STYLE-TYPE: none
}
.main {
TEXT-ALIGN: center; PADDING-BOTTOM: 8px; PADDING-LEFT: 8px; PADDING-RIGHT: 8px; CLEAR: both; PADDING-TOP: 8px
}
#tabs0 {
BORDER-BOTTOM: #cbcbcb 1px solid; BORDER-LEFT: #cbcbcb 1px solid; BACKGROUND-COLOR: #f2f6fb; WIDTH: 400px; HEIGHT: 200px; BORDER-TOP: #cbcbcb 1px solid; BORDER-RIGHT: #cbcbcb 1px solid
}
.menu0 {
WIDTH: 400px
}
.menu0 LI {
TEXT-ALIGN: center; PADDING-BOTTOM: 4px; PADDING-LEFT: 0px; WIDTH: 100px; PADDING-RIGHT: 0px; DISPLAY: block; BACKGROUND: #ffffff; FLOAT: left; CURSOR: pointer; PADDING-TOP: 4px
}
.menu0 LI.hover {
BACKGROUND: #f2f6fb
}
#main0 UL {
DISPLAY: none
}
#main0 UL.block {
DISPLAY: block
}
#tabs1 {
TEXT-ALIGN: left; WIDTH: 400px
}
.menu1box {
POSITION: relative; TEXT-ALIGN: left; WIDTH: 400px; HEIGHT: 22px; OVERFLOW: hidden
}
#menu1 {
Z-INDEX: 1; POSITION: absolute; TOP: 0px; LEFT: 0px
}
#menu1 LI {
TEXT-ALIGN: center; LINE-HEIGHT: 21px; WIDTH: 72px; DISPLAY: block; FLOAT: left; HEIGHT: 21px; CURSOR: pointer
}
#menu1 LI.hover {
BORDER-LEFT: #333 1px solid; BACKGROUND: #fff; BORDER-TOP: #333 1px solid; BORDER-RIGHT: #333 1px solid
}
.main1box {
BORDER-BOTTOM: #333 1px solid; BORDER-LEFT: #333 1px solid; MARGIN-TOP: -1px; WIDTH: 400px; HEIGHT: 181px; CLEAR: both; BORDER-TOP: #333 1px solid; BORDER-RIGHT: #333 1px solid
}
#main1 UL {
DISPLAY: none
}
#main1 UL.block {
DISPLAY: block
}
.menu2box {
POSITION: relative; TEXT-ALIGN: left; WIDTH: 400px; BACKGROUND: #ffffff; HEIGHT: 22px; OVERFLOW: hidden
}
#tabs2 {
BORDER-BOTTOM: #cbcbcb 1px solid; BORDER-LEFT: #cbcbcb 1px solid; BACKGROUND-COLOR: #f2f6fb; WIDTH: 400px; HEIGHT: 200px; BORDER-TOP: #cbcbcb 1px solid; BORDER-RIGHT: #cbcbcb 1px solid
}
#tip2 {
Z-INDEX: 0; POSITION: absolute; LINE-HEIGHT: 22px; WIDTH: 100px; BACKGROUND: #f2f6fb; HEIGHT: 22px; TOP: 0px; LEFT: 0px
}
#menu2 {
Z-INDEX: 1; POSITION: absolute; TOP: 0px; LEFT: 0px
}
#menu2 LI {
TEXT-ALIGN: center; PADDING-BOTTOM: 4px; PADDING-LEFT: 0px; WIDTH: 100px; PADDING-RIGHT: 0px; DISPLAY: block; FLOAT: left; CURSOR: pointer; PADDING-TOP: 4px
}
</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[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
/*第三种形式 利用一个背景层定位*/
var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
function nowtab(m,n){
if(n!=0 && m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;
document.getElementById("tip"+m).style.left=n*100+'px';
document.getElementById("main2").innerHTML=m3[n];
}
//-->
</SCRIPT>
<META name=GENERATOR content="MSHTML 8.00.7600.16625"></HEAD>
<BODY><BR><BR><!--第一种形式-->
<DIV id=tabs0>
<UL id=menu0 class=menu0>
<LI class=hover onclick=setTab(0,0)>新闻 </LI>
<LI onclick=setTab(0,1)>评论 </LI>
<LI onclick=setTab(0,2)>技术 </LI>
<LI onclick=setTab(0,3)>点评 </LI></UL>
<DIV id=main0 class=main>
<UL class=block>
<LI>新闻列表</LI></UL>
<UL>
<LI>评论列表</LI></UL>
<UL>
<LI>技术列表</LI></UL>
<UL>
<LI>点评列表</LI></UL></DIV></DIV><BR><BR><!--第二种形式-->
<DIV id=tabs1>
<DIV class=menu1box>
<UL id=menu1>
<LI class=hover onmouseover=setTab(1,0)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">新闻</A> </LI>
<LI onmouseover=setTab(1,1)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">评论</A> </LI>
<LI onmouseover=setTab(1,2)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">技术</A> </LI>
<LI onmouseover=setTab(1,3)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">点评</A>
</LI></UL></DIV>
<DIV class=main1box>
<DIV id=main1 class=main>
<UL class=block>
<LI>新闻列表</LI></UL>
<UL>
<LI>评论列表</LI></UL>
<UL>
<LI>技术列表</LI></UL>
<UL>
<LI>点评列表</LI></UL></DIV></DIV></DIV><BR><BR><!--第三种形式-->
<DIV id=tabs2>
<DIV class=menu2box>
<DIV id=tip2></DIV>
<UL id=menu2>
<LI class=hover onmouseover=nowtab(2,0)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">新闻</A> </LI>
<LI onmouseover=nowtab(2,1)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">评论</A> </LI>
<LI onmouseover=nowtab(2,2)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">技术</A> </LI>
<LI onmouseover=nowtab(2,3)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">点评</A>
</LI></UL></DIV>
<DIV id=main2 class=main>新闻内容 </DIV></DIV><BR><BR>
<DIV align=center>
<SCRIPT language=javascript
src="三种简洁的Tab导航（网页选项卡）简析%20-%20分享JavaScript-sharejs_com_files/720.js"></SCRIPT>
<BR><BR>获取更多JavaScript代码，请登录JavaScript分享网 <A
href="http://www.sharejs.com/">http://www.sharejs.com/</A> </DIV></BODY></HTML>