学步园

说明：选项卡在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>                                                                
                                                                

 

第二步：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;                                                                
    }                                                                    
                                                                        

 

第三步：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";                                                                            
        }                                                                                
    }                                                                                     
}