<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.tabnav ul{margin:0padding:0list-style:none}
.tabnav li{padding:5 10pxborder:1px solid redfloat:left}
.tabid {border:1px solid #000clear:both}
</style>
<script language='javascript'>
function tab(n){
var tabnav="tab"+n
var tabid="tabid"+n
cleardisplay()
document.getElementById(tabid).style.display="block"
}
function cleardisplay(){
for (i=1i<3i++)
{
var cleartabid="tabid"+i
document.getElementById(cleartabid).style.display="none"
}
}
</script>
</HEAD>
<BODY>
<div>
<div class='tabnav'>
<ul>
<li id='tab1' onclick='tab(1)'>TAB1</li>
<li id='tab2' onclick='tab(2)'>TAB2</li>
</ul>
</div>
<div id='tabid1' class='tabid'>tab1</div>
<div id='tabid2' class='tabid' style='display:none'>tab2</div>
</div>
</BODY>
</HTML>
<!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 runat="server"> <title>使用JavaScript实现的tab</title> <style type="text/css"> /*设置超链接样式*/a{color: #5086a5 text-decoration: none font-size: 12px}a:hover{ color: #5086a5 text-decoration: underline font-size: 12px}a:visited{color: #5086a5 font-size: 12px }/*整个tab层居中，宽度为600px*/#tabDiv{width:600px margin:1em auto padding-bottom: 10px border-right: #b2c9d3 1px solid border-top: #b2c9d3 1px solid border-left: #b2c9d3 1px solid border-bottom: #b2c9d3 1px solid background: #ffffff}/*tab头的样式*/#tabsHead{ padding-left: 0pxheight: 26pxbackground-color: #e8f7fcfont-size: 1emmargin: 1px 0px 0pxcolor: #5086a5line-height: 26px}/*已选tab头（超链接）的样式*/.curtab{padding-top: 0px padding-right: 10px padding-bottom: 0px padding-left: 10px border-right: #b2c9d3 1px solid font-weight: bold float: left cursor: pointer background: #ffffff } /*未选tab头（超链接）的样式*/.tabs{border-right: #c1d8e0 1px solid padding-top: 0px padding-right: 10px padding-bottom: 0px padding-left: 10px font-weight: normal float: left cursor: pointer }p{font-size:9pt margin-left:20pt }</style> <script language="javascript" type="text/jscript"> <!--//显示tab（tabHeadId：tab头中当前的超链接；tabContentId要显示的层ID）function showTab(tabHeadId,tabContentId){//tab层var tabDiv = document.getElementById("tabDiv") //将tab层中所有的内容层设为不可见//遍历tab层下的所有子节点var taContents = tabDiv.childNodes for(i=0i<taContents.lengthi++){//将所有内容层都设为不可见if(taContents[i].id!=null &&taContents[i].id != 'tabsHead'){taContents[i].style.display = 'none' }}//将要显示的层设为可见document.getElementById(tabContentId).style.display = 'block' //遍历tab头中所有的超链接var tabHeads = document.getElementById('tabsHead').getElementsByTagName('a') for(i=0i<tabHeads.lengthi++){//将超链接的样式设为未选的tab头样式tabHeads[i].className='tabs' }//将当前超链接的样式设为已选tab头样式document.getElementById(tabHeadId).className='curtab' document.getElementById(tabHeadId).blur() }--> </script></head><body> <form id="form1" runat="server"> <!--tab控件--> <div id="tabDiv"><!--tab头--><div id="tabsHead"><a class="curtab" id="tabs1" href="javascript:showTab('tabs1','tabContent1')">钗头凤</a><a class="tabs" id="tabs2" href="javascript:showTab('tabs2','tabContent2')">卜算子·咏梅</a></div><div id="tabContent1" style="display:block"><span id="ContentArea"><html><head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>网页特效</title>
</head>
<style type="text/css">
#dNavBar{
background-color:#ffffff
}
#dNavBar li{
list-style-type:none
float:left
width:84px
height:28px
line-height:28px
font-size:12px
color:#FFFFFF
border:3px solid #ffffff
background-color:#86C2FF
text-align:center
display:block
cursor:pointer
}
#subMenu{
background-color:#0000FF
width:500px
border-left:3px solid #ffffff
border-right:3px solid #ffffff
height:29px
line-height:29px
color:#FFFFFF
font-size:12px
padding-left:10px
}
body {
margin-left: 0px
margin-top: 0px
margin-right: 0px
margin-bottom: 0px
}
a:link {
color: #FFFFFF
text-decoration: none
}
a:hover{
color: #FFFFFF
text-decoration: none
}
a:visited{
color: #FFFFFF
text-decoration: none
}
</style>
<script language="javascript">
function ShowMenu()
{
var barCTT=document.getElementById("dNavBar")
var liArr=barCTT.getElementsByTagName("li")
var links=new Array()
links[0]="<a href='#'>当前位置：首页"
links[1]="<a href='#'>项目一</a>| <a href='#'>项目二</a>| <a href='#'>项目三</a>| <a href='#'>项目四</a>"
links[2]="<a href='#'>项目一</a>| <a href='#'>项目二</a>| <a href='#'>项目三</a>"
links[3]="<a href='#'>项目一</a>| <a href='#'>项目二</a>| <a href='#'>项目三</a>| <a href='#'>项目四</a>| <a href='#'>项目五</a>"
links[4]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
links[5]="<a href='#'>项目一</a>| <a href='#'>项目二</a>| <a href='#'>项目三</a>"
links[6]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
links[7]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
links[8]="<a href='http://www.qpsh.com'>项目一</a>| <a href='#'>项目二</a>"
links[9]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
links[10]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
links[11]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
links[12]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
for (i=0i<liArr.lengthi++)
{
liArr[i].onclick=function()
{
selectThis(this,liArr,links)
}
}
}
function selectThis(indexObj,allLi,infoArr)
{
var index=0
for (i=0i<allLi.lengthi++)
{
allLi[i].style.border="3px solid #ffffff"
allLi[i].style.backgroundColor="#86C2FF"
allLi[i].style.height="28px"
if (indexObj==allLi[i])
{
index=i
}
}
indexObj.style.borderBottom="0px solid #666688"
indexObj.style.backgroundColor="#0000FF"
indexObj.style.height="31px"
document.getElementById("subMenu").innerHTML=infoArr[index]
}
</script>
<body onLoad="ShowMenu()">
<div id="dNavBar" style="float:nonewidth:560px"><li>首页</li><li>娱乐快报</li><li>音乐天地</li><li>极品FLASH</li>
</div>
<div id="subMenu">站务公告</div>
</body>
</html>
</span>
