春风博客

春天里，百花香...

导航

<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.blogjava.net/Files/sitinspring/TreeSideBar20081026165235.rar

posted on 2008-10-26 16:53 sitinspring 阅读(3176) 评论(0)  编辑  收藏 所属分类: HTML,CSS&JS


只有注册用户登录后才能发表评论。
网站导航:
 
sitinspring(http://www.blogjava.net)原创,转载请注明出处.