完美实现导航滑动功能

效果大致是这样的

代码如下

<div class="nTab">
            <div class="TabTitle100">
                <ul id="myTab100" >
                    <li class="active" onmouseover="nTabs(this,0);"><a href="../welcome/">网站首页</a></li>    
                    <li class="normal" onmouseover="nTabs(this,1);"><a href="#">政务公开</a></li>
                    <li class="normal" onmouseover="nTabs(this,2);"><a href="#">财政信息</a></li>
                    <li class="normal" onmouseover="nTabs(this,3);"><a href="#">财政业务</a></li>
                    <li class="normal" onmouseover="nTabs(this,4);"><a href="#">政策法规</a></li>
                    <li class="normal" onmouseover="nTabs(this,5);"><a href="#">民生工程</a></li>
                    <li class="normal" onmouseover="nTabs(this,6);"><a href="#"> 制度建设</a></li>
                    <li class="normal" onmouseover="nTabs(this,7);"><a href="#">网上办事</a></li>
                    <li class="normal" onmouseover="nTabs(this,8);"><a href="#">互动参与</a></li>
                </ul>
            </div>
        </div>

CSS代码如下

/* 滑动门（舌签）完美版 */
.nTab{width:100%;}
.none {display:none;}
.nTab .TabTitle100{clear:both;overflow:hidden;width:1004px;height:33px;background:url(../images/menu_bg.jpg) repeat-x center top;}
.nTab .TabTitle100 ul{margin:0px;width:960px;  height:38px; margin-left:55px; }
.nTab .TabTitle100 li{float:left;width:100px;cursor:pointer;list-style-type:none;}
.nTab .TabTitle100 .active{height:25px;padding-top:8px;background:url(../images/active.jpg) no-repeat center center;}
.nTab .TabTitle100 .active a{color:#ff6600;font-size:14px;font-weight:bold;text-decoration:none;}
.nTab .TabTitle100 .normal{height:25px;padding-top:8px;background:url(../images/menus_bg2.gif) no-repeat right center;}
.nTab .TabTitle100 .normal a{color:#FFFFFF;font-size:14px;font-weight:bold;text-decoration:none;}
.nTab .TabContent100{width:984px;height:25px;background:url(../images/menus_area_bg.jpg) no-repeat center top;color:#666666;}
.nTab .TabContent100 a{color:#000000;font-size:12px;text-decoration:none;}
.nTab .TabContent100 a:hover{color:#000000;font-size:12px;text-decoration:none;}

 

 切换需要用到的JS代码如下

function nTabs(thisObj,Num){ 

    if(thisObj.className == "active")return; 
    
    var tabObj = thisObj.parentNode.id; 
    
    var tabList = document.getElementById(tabObj).getElementsByTagName("li"); 
    
    for(i=0; i <tabList.length; i++){ 
    
        if (i == Num){ 
        
            thisObj.className = "active";  
        
            document.getElementById(tabObj+"_Content"+i).style.display = "block";         

        }else{ 
        
            tabList[i].className = "normal";  
        
            document.getElementById(tabObj+"_Content"+i).style.display = "none"; 
        
        } 
    
    }  

}