春風博客
          

          

          春天里，百花香...
          

			
          
				
					

          導航
          

					
          
	
          
		
          <2008年10月>
          
	
          日一二三四五六
          2829301234
          567891011
          12131415161718
          19202122232425
          2627282930311
          2345678
          

          

					

          統計
          
	
					

          公告
          
	MAIL: junglesong@gmail.com
          
MSN: junglesong_5@hotmail.com
          

          
Locations of visitors to this page 

					

          常用鏈接
          


          留言簿(11)
          


		
          隨筆分類(224)
          
		
				
			
	
		
          隨筆檔案(126)
          
		
				
			
	
		
          個人軟件下載
          
		
				
			
	
		
          我的其它博客
          
		
				
			
	
		
          我的鄰居們
          
		
				
			
	


          最新隨筆
          




          搜索
          



          積分與排名
          



          最新評論
	
          

          
	
			
		

          


          閱讀排行榜
          



          評論排行榜
          


				
			
          
			
          
				
					
	
          
		
          
			樹狀側邊菜單欄示例
		
          
		示例圖片：
          

          

          
控制代碼：
          

          <%@ page contentType="text/html; charset=UTF-8"%>
          
          <% 
          
              String ulId=request.getParameter("ulId");
          
              if(ulId==null){
          
        ulId          ="poems";
          
    }
          
          %>
          
          <!-- 鏈接導航部分 -->
          
          <ul>
          
              <li>    
          
              <% 
          
                  if( ulId.equals("poems")){
          
            out.print(          "<img src='web/img/openedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">詩歌</a>");
          
            out.print(          "<ul id='poems' style='display:block'>");
          
        }
          
                  else{
          
            out.print(          "<img src='web/img/closedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">詩歌</a>");
          
            out.print(          "<ul id='poems' style='display:none'>");
          
        }
          
              %>        
          
                      <li><img src="web/img/join.gif"/><a href="ShowPage?page=index&&ulId=poems&&aid=1">春歌</a></li>
          
                      <li><img src="web/img/join.gif"/><a href="ShowPage?page=index&&ulId=poems&&aid=3">俠客行</a></li>
          
                      <li><img src="web/img/join.gif"/><a href="ShowPage?page=index&&ulId=poems&&aid=4">南陵別兒童入京</a></li>
          
                      <li><img src="web/img/joinbottom.gif"/><a href="ShowPage?page=index&&ulId=poems&&aid=16">憶昔開元全盛日</a></li>
          
                  </ul>
          
              </li>
          
              <li>
          
              <% 
          
                  if( ulId.equals("logions")){
          
            out.print(          "<img src='web/img/openedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">名言</a>");
          
            out.print(          "<ul id='logions' style='display:block'>");
          
        }
          
                  else{
          
            out.print(          "<img src='web/img/closedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">名言</a>");
          
            out.print(          "<ul id='logions' style='display:none'>");
          
        }
          
              %>    
          
                  <li><img src="web/img/join.gif"/><a href="ShowPage?page=index&&ulId=logions&&aid=6">擇善人而交</a></li>
          
                  <li><img src="web/img/join.gif"/><a href="ShowPage?page=index&&ulId=logions&&aid=7">處事不必求功</a></li>
          
                  <li><img src="web/img/join.gif"/><a href="ShowPage?page=index&&ulId=logions&&aid=8">多躁者必無沉毅之識</a></li>
          
                  <li><img src="web/img/join.gif"/><a href="ShowPage?page=index&&ulId=logions&&aid=9">盤根錯節</a></li>
          
                  <li><img src="web/img/joinbottom.gif"/><a href="ShowPage?page=index&&ulId=logions&&aid=10">人遇逆境</a></li>
          
                  </ul>
          
              </li>
          
              <li>
          
              <% 
          
                  if( ulId.equals("couplets")){
          
            out.print(          "<img src='web/img/openedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">對聯</a>");
          
            out.print(          "<ul id='couplets' style='display:block'>");
          
        }
          
                  else{
          
            out.print(          "<img src='web/img/closedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">對聯</a>");
          
            out.print(          "<ul id='couplets' style='display:none'>");
          
        }
          
              %>
          
                      <li><img src="web/img/join.gif"/><a href="ShowPage?page=index&&ulId=couplets&&aid=2">天地會</a></li>
          
                      <li><img src="web/img/joinbottom.gif"/><a href="ShowPage?page=index&&ulId=couplets&&aid=5">上國衣冠</a></li>
          
                  </ul>
          
              </li>
          
              <li>
          
              <% 
          
                  if( ulId.equals("zens")){
          
            out.print(          "<img src='web/img/openedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">禪語</a>");
          
            out.print(          "<ul id='zens' style='display:block'>");
          
        }
          
                  else{
          
            out.print(          "<img src='web/img/closedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">禪語</a>");
          
            out.print(          "<ul id='zens' style='display:none'>");
          
        }
          
              %>
          
                      <li><img src="web/img/join.gif"/><a href="ShowPage?page=index&&ulId=zens&&aid=11">智者知幻即離</a></li>
          
                      <li><img src="web/img/join.gif"/><a href="ShowPage?page=index&&ulId=zens&&aid=12">世間有為法</a></li>
          
                      <li><img src="web/img/joinbottom.gif"/><a href="ShowPage?page=index&&ulId=zens&&aid=13">菩提本非樹</a></li>
          
                  </ul>
          
              </li>
          
              <li>
          
              <% 
          
                  if( ulId.equals("knowledges")){
          
            out.print(          "<img src='web/img/openedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">知識</a>");
          
            out.print(          "<ul id='knowledges' style='display:block'>");
          
        }
          
                  else{
          
            out.print(          "<img src='web/img/closedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">知識</a>");
          
            out.print(          "<ul id='knowledges' style='display:none'>");
          
        }
          
              %>
          
                      <li><img src="web/img/join.gif"/><a href="ShowPage?page=index&&ulId=knowledges&&aid=14">博學審問</a></li>
          
                      <li><img src="web/img/joinbottom.gif"/><a href="ShowPage?page=index&&ulId=knowledges&&aid=15">坐而論道</a></li>
          
                  </ul>
          
              </li>
          
              <li>
          
              <% 
          
                  if( ulId.equals("weij")){
          
            out.print(          "<img src='web/img/openedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">魏晉風度</a>");
          
            out.print(          "<ul  id='weij' style='display:block'>");
          
        }
          
                  else{
          
            out.print(          "<img src='web/img/closedfolder.gif' onclick=\"openCloseSubTree(this);\"/><a href='#' onclick=\"openCloseSubTree2(this);\">魏晉風度</a>");
          
            out.print(          "<ul  id='weij' style='display:none'>");
          
        }
          
              %>
          
                      <li><img src="web/img/join.gif"/><a href="ShowPage?page=index&&ulId=weij&&aid=17">觀棋柯爛,伐木丁丁</a></li>
          
                      <li><img src="web/img/joinbottom.gif"/><a href="ShowPage?page=index&&ulId=weij&&aid=18">乘興而行興盡而返</a></li>
          
                  </ul>
          
              </li>
          
          </ul>
          

          

          
          <!-- SCRIPT部分 -->
          
          <SCRIPT LANGUAGE="JavaScript">
          
          <!--
          
          var openedImgSrc="web/img/openedfolder.gif";
          
          var closedImgSrc="web/img/closedfolder.gif";
          

          
          function openCloseSubTree(img){
          
              // 獲得圖片節點的圖片屬性    
          
              var imgSrc=img.getAttribute("src");
          
    
          
              // 圖片節點的下兩個節點為無序列表節點    
          
              var ul=img.nextSibling.nextSibling;
          
    
          
              if(imgSrc.indexOf(openedImgSrc)!=-1){
          
                  // 關閉子項
          
                  img.setAttribute("src",closedImgSrc);
          
        ul.style.display          ="none";
          
    }
          
              else if(imgSrc.indexOf(closedImgSrc)!=-1){
          
                  // 展開子項
          
                  img.setAttribute("src",openedImgSrc);
          
        ul.style.display          ="block";
          
    }
          
}
          

          
          function openCloseSubTree2(link){
          
              // 獲得圖片節點
          
              var img=link.previousSibling;
          

          
              // 獲得圖片節點的圖片屬性    
          
              var imgSrc=img.getAttribute("src");
          
    
          
              // 圖片節點的下兩個節點為無序列表節點    
          
              var ul=link.nextSibling;
          
    
          
              if(imgSrc.indexOf(openedImgSrc)!=-1){
          
                  // 關閉子項
          
                  img.setAttribute("src",closedImgSrc);
          
        ul.style.display          ="none";
          
    }
          
              else if(imgSrc.indexOf(closedImgSrc)!=-1){
          
                  // 展開子項
          
                  img.setAttribute("src",openedImgSrc);
          
        ul.style.display          ="block";
          
    }
          
}
          
          //-->
          
          </SCRIPT>
          

          

          
代碼下載：
          
http://www.aygfsteel.com/Files/sitinspring/TreeSideBar20081026165235.rar 
 
		
          
			posted on 2008-10-26 16:53 sitinspring 閱讀(3201) 評論(0)  編輯  收藏  所屬分類: HTML,CSS&JS 
		
          
	
          







          
	    
    




          








          

				
			
          
			
sitinspring(http://www.aygfsteel.com)原創,轉載請注明出處.
    







          
        
	




主站蜘蛛池模板：
临澧县|
炉霍县|
洪泽县|
麻栗坡县|
南投市|
虞城县|
北辰区|
石棉县|
融水|
塘沽区|
秦皇岛市|
丰镇市|
确山县|
宜丰县|
瑞安市|
道真|
城固县|
三亚市|
宝应县|
嘉义市|
林芝县|
南城县|
涞源县|
海南省|
林西县|
紫阳县|
闻喜县|
铜川市|
怀安县|
龙门县|
林西县|
平阳县|
察雅县|
乾安县|
含山县|
天门市|
项城市|
靖西县|
射洪县|
吴川市|
光泽县|