选项卡应用
说明:选项卡在WEB页面中经常用到,是一种很好的数据呈现的方法,利用它可以方便的组织你要显示的数据。
效果如下:
点击发布信息
应用
第一步:前台页面的代码
<div class="nTab">
<div class="tabTitle">
<UL id="tab0">
<LI class="mouseOver" onclick="setTab(this,0)">
帐号信息
</LI>
<LI class="mouseOut" onclick="setTab(this,1)">
发布信息
</LI>
<LI class="mouseOut" onclick="setTab(this,2)">
留言信息
</LI>
</UL>
</div>
<DIV class="tabContent">
<DIV class="active" id="tab0_Content0">
……帐号信息……
</DIV>
<DIV class="hide" id="tab0_Content1">
……发布信息……
</DIV>
<DIV class="hide" id="tab0_Content2">
……留言信息……
</DIV>
</DIV>
</DIV>
<div class="tabTitle">
<UL id="tab0">
<LI class="mouseOver" onclick="setTab(this,0)">
帐号信息
</LI>
<LI class="mouseOut" onclick="setTab(this,1)">
发布信息
</LI>
<LI class="mouseOut" onclick="setTab(this,2)">
留言信息
</LI>
</UL>
</div>
<DIV class="tabContent">
<DIV class="active" id="tab0_Content0">
……帐号信息……
</DIV>
<DIV class="hide" id="tab0_Content1">
……发布信息……
</DIV>
<DIV class="hide" id="tab0_Content2">
……留言信息……
</DIV>
</DIV>
</DIV>
第二步:CSS代码
.nTab
{
width: 790px;
height: 180px;
margin-top:5px;
}
.tabTitle
{
width:100%;
height:30px;
background-image: url(../image/zheader.gif);
overflow:hidden;
}
.tabTitle ul
{
margin-top:2px;
list-style:none;
}
.tabTitle li
{
width:90px;
height:28px;
padding:6px 0px 0px 0px;
cursor:hand;
font-weight:bold;
text-align:center;
display:inline-block;
float:left;
}
.tabTitle li.mouseOver
{
color:White;
background-color:Green;
}
.tabTitle li.mouseOut
{
color:white;
}
.tabContent
{
width:100%;
height:auto;
overflow:visible;
padding:8px;
clear:both;
float:left;
}
.tabContent .active
{
display:block;
}
.tabContent .hide
{
display:none;
}
{
width: 790px;
height: 180px;
margin-top:5px;
}
.tabTitle
{
width:100%;
height:30px;
background-image: url(../image/zheader.gif);
overflow:hidden;
}
.tabTitle ul
{
margin-top:2px;
list-style:none;
}
.tabTitle li
{
width:90px;
height:28px;
padding:6px 0px 0px 0px;
cursor:hand;
font-weight:bold;
text-align:center;
display:inline-block;
float:left;
}
.tabTitle li.mouseOver
{
color:White;
background-color:Green;
}
.tabTitle li.mouseOut
{
color:white;
}
.tabContent
{
width:100%;
height:auto;
overflow:visible;
padding:8px;
clear:both;
float:left;
}
.tabContent .active
{
display:block;
}
.tabContent .hide
{
display:none;
}
第三步:JavaScript代码
function setTab(thisObj,Num)
{
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (i == Num)
{
thisObj.className = "mouseOver";
document.getElementById(tabObj + "_Content" + i).className = "active";
}
else
{
tabList[i].className = "mouseOut";
document.getElementById(tabObj + "_Content" + i).className = "hide";
}
}
}
{
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (i == Num)
{
thisObj.className = "mouseOver";
document.getElementById(tabObj + "_Content" + i).className = "active";
}
else
{
tabList[i].className = "mouseOut";
document.getElementById(tabObj + "_Content" + i).className = "hide";
}
}
}