Java蜘蛛人 歡迎大家
          
			  歡迎大家 來到我的blog ,  如果我身邊的朋友 有什么不懂可以直接來問我   我會細心的幫助你的.
      如果網絡上的朋友有什么不懂的 可以加我Java蜘蛛人
QQ48187537

		          		
	
          

          

          

          

          posts - 54, comments - 192, trackbacks - 0, articles - 1
          


          		
	
          
	
          
		
			
		
		
			
          
				
					
	
          
		
          
			
          
				javaScript 實現樹型
			
          
 			Posted on 2008-03-13 19:54 Java蜘蛛人 --鄭成橋 閱讀(954) 評論(1)  編輯  收藏  
			
			


		
          
		
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
          
          <head> 
          
          <html>
          
          <style type="text/css"> 
          
          <!-- 
          
          *{margin:0;padding:0;border:0;} 
          
body           { 
          
    font          -family: arial, 宋體, serif; 
          
    font          -size:12px; 
          
}           
          
#nav           { 
          
    width:180px; 
          
    line          -height: 24px;  
          
    list          -style-type: none; 
          
    text          -align:left; 
          
              /*定義整個ul菜單的行高和背景色*/ 
          
}           
          

          
          /*==================一級目錄===================*/ 
          
#nav a           { 
          
    width: 160px;  
          
    display: block; 
          
    padding          -left:20px; 
          
              /*Width(一定要)，否則下面的Li會變形*/ 
          
}           
          

          
#nav li           { 
          
    background:#CCC;           /*一級目錄的背景色*/ 
          
    border          -bottom:#FFF 1px solid; /*下面的一條白邊*/ 
          
              float:left; 
          
              /*float：left,本不應該設置，但由于在Firefox不能正常顯示 
          
    繼承Nav的width,限制寬度，li自動向下延伸          */           
          
}           
          

          
#nav li a:hover          { 
          
    background:#CC0000;              /*一級目錄onMouseOver顯示的背景色*/ 
          
}           
          

          
#nav a:link            { 
          
    color:#          666; text-decoration:none; 
          
}           
          
#nav a:visited            { 
          
    color:#          666;text-decoration:none; 
          
}           
          
#nav a:hover            { 
          
    color:#FFF;text          -decoration:none;font-weight:bold; 
          
}           
          

          
          /*==================二級目錄===================*/ 
          
#nav li ul           { 
          
    list          -style:none; 
          
    text          -align:left; 
          
}           
          
#nav li ul li          {     
          
    background: #EBEBEB;           /*二級目錄的背景色*/ 
          
}           
          

          
#nav li ul a          { 
          
         padding          -left:20px; 
          
         width:160px; 
          
              /* padding-left二級目錄中文字向右移動，但Width必須重新設置=(總寬度-padding-left)*/ 
          
}           
          

          
          /*下面是二級目錄的鏈接樣式*/ 
          

          
#nav li ul a:link            { 
          
    color:#          666; text-decoration:none; 
          
}           
          
#nav li ul a:visited            { 
          
    color:#          666;text-decoration:none; 
          
}           
          
#nav li ul a:hover           { 
          
    color:#F3F3F3; 
          
    text          -decoration:none; 
          
    font          -weight:normal; 
          
    background:#CC0000; 
          
              /* 二級onmouseover的字體顏色、背景色*/ 
          
}           
          

          
          /*==============================*/ 
          
#nav li:hover ul           { 
          
    left: auto; 
          
}           
          
#nav li.sfhover ul           { 
          
    left: auto; 
          
}           
          
#content           { 
          
    clear: left;  
          
}           
          
#nav ul.collapsed           { 
          
    display: none; 
          
}           
          
          --> 
          

          
#PARENT          { 
          
    width:300px; 
          
    padding          -left:20px; 
          
}           
          
          </style> 
          
          </head> 
          

          
          <body>
          
          <script type="text/javascript" language="javascript"><!-- 
          
 var sid          ="540"; 
          
 var fixid          =3; //--></script> 
          
           <script type="text/javascript" src="http://js.coogao.cn/jscode/magicboxad.js"></script> 
          
          <div id="PARENT"> 
          
          <ul id="nav"> 
          
          <li><a href="#Menu=ChildMenu1"  onclick="DoMenu('ChildMenu1')">我的網站</a> 
          
              <ul id="ChildMenu1" class="collapsed"> 
          
              <li><A  target="_blank">[url]www.netany.net[/url]</a></li> 
          
              <li><A  target="_blank">[url]www.netany.net[/url]</a></li> 
          
              <li><A  target="_blank">[url]www.netany.net[/url]</a></li> 
          
              </ul> 
          
          </li> 
          
          <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">我的帳務</a> 
          
              <ul id="ChildMenu2" class="collapsed"> 
          
              <A  target="_blank">支付</a></li> 
          
              <li><a href="#">網上支付</a></li> 
          
              <li><a href="#">登記匯款</a></li> 
          
              <li><a href="#">在線招領</a></li> 
          
              <li><a href="#">歷史帳務</a></li> 
          
              </ul> 
          
          </li> 
          
          <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">網站管理</a> 
          
              <ul id="ChildMenu3" class="collapsed"> 
          
              <li><a href="#">登錄</a></li> 
          
              <A  target="_blank">管理</a></li> 
          
              <li><a href="#">管理</a></li> 
          
              <li><a href="#">管理</a></li> 
          
              </ul> 
          
          </li> 
          
          <li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">網站管理</a> 
          
              <ul id="ChildMenu4" class="collapsed"> 
          
              <li><a href="#">登錄</a></li> 
          
              <A  target="_blank">管理</a></li> 
          
              <li><a href="#">管理</a></li> 
          
              <li><a href="#">管理</a></li> 
          
              </ul> 
          
          </li> 
          
          </ul> 
          
          </div> 
          

          
          </body> 
          
          </html> 
          
          <script type=text/javascript><!-- 
          
var LastLeftID           = ""; 
          

          
function menuFix()           { 
          
    var obj           = document.getElementById("nav").getElementsByTagName("li"); 
          
     
          
              for (var i=0; i<obj.length; i++) { 
          
        obj[i].onmouseover          =function() { 
          
                      this.className+=(this.className.length>0? " ": "") + "sfhover"; 
          
        }           
          
        obj[i].onMouseDown          =function() { 
          
                      this.className+=(this.className.length>0? " ": "") + "sfhover"; 
          
        }           
          
        obj[i].onMouseUp          =function() { 
          
                      this.className+=(this.className.length>0? " ": "") + "sfhover"; 
          
        }           
          
        obj[i].onmouseout          =function() { 
          
                      this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); 
          
        }           
          
    }           
          
}           
          

          
function DoMenu(emid) 
          
          { 
          
    var obj           = document.getElementById(emid);     
          
    obj.className           = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded"); 
          
              if((LastLeftID!="")&&(emid!=LastLeftID))    //關閉上一個Menu 
          
              { 
          
        document.getElementById(LastLeftID).className           = "collapsed"; 
          
    }           
          
    LastLeftID           = emid; 
          
}           
          

          
function GetMenuID() 
          
          { 
          

          
    var MenuID          =""; 
          
    var _paramStr           = new String(window.location.href); 
          

          
    var _sharpPos           = _paramStr.indexOf("#"); 
          
     
          
              if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1) 
          
              { 
          
        _paramStr           = _paramStr.substring(_sharpPos + 1, _paramStr.length); 
          
    }           
          
              else 
          
              { 
          
        _paramStr           = ""; 
          
    }           
          
     
          
              if (_paramStr.length > 0) 
          
              { 
          
        var _paramArr           = _paramStr.split("&"); 
          
                  if (_paramArr.length>0) 
          
                  { 
          
            var _paramKeyVal           = _paramArr[0].split("="); 
          
                      if (_paramKeyVal.length>0) 
          
                      { 
          
                MenuID           = _paramKeyVal[1]; 
          
            }           
          
        }           
          
                  /* 
          
        if (_paramArr.length>0) 
          
        { 
          
            var _arr = new Array(_paramArr.length); 
          
        } 
          
         
          
        //取所有#后面的，菜單只需用到Menu 
          
        //for (var i = 0; i < _paramArr.length; i++) 
          
        { 
          
            var _paramKeyVal = _paramArr[i].split('='); 
          
             
          
            if (_paramKeyVal.length>0) 
          
            { 
          
                _arr[_paramKeyVal[0]] = _paramKeyVal[1]; 
          
            }         
          
        } 
          
                  */           
          
    }           
          
     
          
              if(MenuID!="") 
          
              { 
          
        DoMenu(MenuID) 
          
    }           
          
}           
          

          
GetMenuID();              //*這兩個function的順序要注意一下，不然在Firefox里GetMenuID()不起效果 
          
          menuFix(); 
          
          --></script>
          

          

          

          
	
          


          
	    
    

          Feedback
          
	
			
          
				
          
					
          
						# re: javaScript 實現樹型  回復  更多評論
						  
					
          
					2013-09-17 19:49 by lizhi
				
          
				
			
          
		




          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊用戶登錄后才能發表評論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網站導航:
		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				
			
          
		          		
	
          
	
          
		
			

		
	
          

          


    







          
        
	




主站蜘蛛池模板：
平泉县|
西盟|
赤壁市|
林州市|
临洮县|
余姚市|
将乐县|
枣庄市|
仁化县|
奉节县|
古蔺县|
防城港市|
岑巩县|
广州市|
绥芬河市|
乐安县|
星座|
五家渠市|
西畴县|
方正县|
宕昌县|
即墨市|
镇巴县|
嵊泗县|
普格县|
深泽县|
南通市|
宣汉县|
库尔勒市|
葫芦岛市|
鹤壁市|
鄂州市|
罗平县|
沽源县|
南开区|
克什克腾旗|
钟祥市|
卢氏县|
龙游县|
巴林左旗|
通榆县|