求解一个javascript效果

上下两个导航，点击上面的导航，下面出现一排小的导航
第二级导航中，会实现鼠标滑动后改变相应div内容的效果
<script language="javascript" type="text/javascript">
    
    //标签页2
    function selectContent(showNav,showContent,selfObj){
// 操作标签
var tag = document.getElementById("content-view-mm").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.className = "m_li_a";
// 操作第二级标签
for(i=1; j=document.getElementById("s_"+i); i++){
j.style.display = "none";
}
document.getElementById(showNav).style.display = "block";

//操作内容
      var tagContent = document.getElementById("forth-detail-content").getElementsByTagName("div");
  var taglength = tagContent.length;
  for(i=0; i<taglength; i++){
//tagContent[i].className = "forthContent";
tagContent[i].style.display="none";
   }
  document.getElementById(showContent).style.display = "block";
    }
    
    
//标签页里面的滑动效果
    //初始化
 var def="1";
function mover(object){
  //主菜单
  var tt=document.getElementById("t_"+object);
  tt.className="selectThirdTag";
  
  //初始主菜单先隐藏效果
  if(def!=0){
    var tdef=document.getElementById("t_"+def);
    tdef.className="thirdTags";
  }
  //子菜单
  var ff=document.getElementById("f_"+object);
  ff.style.display="block";
  //初始子菜单先隐藏效果
  if(def!=0){
    var fdef=document.getElementById("s_"+def);
    fdef.style.display="none";
  }
}function mout(object){
  //主菜单
  var tt=document.getElementById("t_"+object);
  tt.className="thirdTags";
  //初始主菜单还原效果
  if(def!=0){
    var tdef=document.getElementById("t_"+def);
    tdef.className="selectThirdTag";
  }
  //子菜单
  var ff=document.getElementById("f_"+object);
  ff.style.display="none";
  //初始子菜单还原效果
  if(def!=0){
    var fdef=document.getElementById("f_"+def);
    fdef.style.display="block";
  }
}
    
    
    </script>     <div class="content-view1">
    <div class="content-view1-nav">
 <h2>整形美容项目</h2>
 

 <div class="content-view1-nav1" id="content-view1-tag">
   <ul id="content-view-mm">
                <li id="m_1" class="m_li_a" onclick="selectContent('s_1','f_11',this)" ><a href="#">面部轮廓</a></li>
                <li id="m_2" onclick="selectContent('s_2','f_21',this)"><a href="#">眼部美容</a></li>
                <li id="m_3" onclick="selectContent('s_3','f_31',this)"><a href="#">鼻部美容</a></li>
                <li id="m_4" onclick="selectContent('s_4','f_41',this)"><a href="#">胸部美容</a></li>
                <li id="m_5" onclick="selectContent('s_5','f_51',this)"><a href="#">形体美容</a></li>
                <li id="m_6" onclick="selectContent('s_6','f_61',this)"><a href="#">牙齿美容</a></li>
              </ul>
   </div>
 
</div>
  
    <div class="content-view1-main">
  <div class="view-left">
     <div class="view-left-pic">
       <a href="#">
       <img src="images/mingxing.jpg" />
       </a>
     </div>
     
     <%--此处应该有多个details--%>
 <div class="view-left-nav-detail">
     <ul id="smenu">
                      <li id="s_1" class="s_li s_li_a" >
                         <a href="javascript:void(0)"  id="t_11" class="selectThirdTag">财税简介</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                        
                      </li>
                      
                      <li id="s_2" class="s_li">
                         <a href="javascript:void(0)"  onmouseover='mover(21);' onmouseout='mout(21);' class="thirdTags"  name="thirdTags" id="t_21">财税简介</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                     
                      </li>
                      
                      <li  id="s_3" class="s_li">
                         <a href="javascript:void(0)" onmouseover='mover(31);' onmouseout='mout(31);' class="thirdTags" name="thirdTags"  id="t_31">下载专区</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                         <a href="javascript:void(0)" onmouseover='mover(32);' onmouseout='mout(32);' class="thirdTags" name="thirdTags" id="t_32" >上传专区</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                     
                      </li>
                      
                     <li id="s_4" class="s_li">
                       <a href="javascript:void(0)"  onmouseover='mover(41);' onmouseout='mout(41);' class="thirdTags" name="thirdTags" id="t_41">最新公告</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                  
                     </li>
                     
                     <li id="s_5" class="s_li">
                     <a href="javascript:void(0)"  onmouseover='mover(51);' onmouseout='mout(51);' class="thirdTags" name="thirdTags" id="t_51">最新政策</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                     <a href="javascript:void(0)" onmouseover='mover(52);' onmouseout='mout(52);' class="thirdTags" name="thirdTags" id="t_52">政策法规查询</a>
                     </li>
                     
                     <li id="s_6" class='s_li'>
                     <a href="javascript:void(0)"  onmouseover='mover(61);' onmouseout='mout(61);' class="thirdTags" name="thirdTags" id="t_61">税收宣传</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                   
                   
                     </li>
               
                    </ul>
                    
                    <div class="detail-content" id="forth-detail-content">
                    
                       <div id="f_11"  name="forthContentDetail" class="forthContent selectForthContent">内容11</div>
                     
                       
                       <div id="f_21"  onmouseover='mover(21);' onmouseout='mout(21);'  name="forthContentDetail" class="forthContent">内容21</div>
                      
                       
                       <div id="f_31"  onmouseover='mover(31);' onmouseout='mout(31);' name="forthContentDetail"  class="forthContent">内容31</div>
                       <div id="f_32"  onmouseover='mover(32);' onmouseout='mout(32);'  name="forthContentDetail"  class="forthContent">内容32</div>
                     
                       
                       <div id="f_41"  onmouseover='mover(41);' onmouseout='mout(41);' name="forthContentDetail"  class="forthContent">内容41</div>
                     
                       
                       <div id="f_51"  onmouseover='mover(51);' onmouseout='mout(51);' name="forthContentDetail"  class="forthContent">内容51</div>
                       <div id="f_52"  onmouseover='mover(52);' onmouseout='mout(52);'  name="forthContentDetail"  class="forthContent">内容52</div>
                      
                       
                       <div id="f_61"  onmouseover='mover(61);' onmouseout='mout(61);' name="forthContentDetail"  class="forthContent">内容61</div>
                      
                       
                    </div>
    
    
     
 </div>
 
 
  </div>
  
  
              
</div>
  </div>

解决方案 »

  1.   

    .content-view1{ width:973px; padding:2px 0 10px; overflow:hidden; margin-top:10px; border:1px solid #D6D6D6;}
    .content-view1-nav{ width:973px; overflow:hidden; height:50px;}
    .content-view1-nav h2{ margin:0; font-size:16px; font-weight:bold; line-height:45px; float:left; width:250px; padding-left:20px; background-color:#F9F4EE;}
    .content-view1-nav1{float:left; font-size:14px; color:#961415;}
    .content-view1-nav1 a:hover{ border-bottom:2px solid #e1e1e1}
    .content-view1-nav1 a{ border-bottom:2px solid #a10000 ;height: 45px; line-height: 45px; float: left; display:block; text-align: center;vertical-align: middle; padding-right:5px; width: 60px;}#content-view-mm{padding:0px; margin:0px;}
    #content-view-mm li{ float:left;}
    #content-view-mm li.m_li_a{ background-color:Gray;}
    .forthContent{ display:none;} 
    .selectForthContent{ display:block;}  
    #smenu{ padding:0px; margin:0px;}               
    #smenu li.s_li{  width:400px; height:20px;display:none;}
    #smenu li.s_li_a{ display:block;}
      

  2.   

    参考
    http://jqueryui.com/demos/accordion/