折叠菜单--实现左边目录,右边显示
用iframe标签
1.先有一个显示界面,用iframe分别显示左右的界面
<%-- Created by IntelliJ IDEA. User: Skye Date: 2017/12/26 Time: 9:21 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <iframe src="/show/showAll.jsp" align="left" width="15%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight=" 0" scrolling="no" allowtransparency="yes"></iframe> </iframe> <iframe src="/welcome/hello.jsp" align="right" name="iframe_a" width="80%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight=" 0" scrolling="no" allowtransparency="yes"></iframe> </iframe> </body> </html>
2.然后,分别是左边的界面show/showAll.jsp,和右边的界面welcome/hello.jsp
<%-- Created by IntelliJ IDEA. User: Skye Date: 2017/12/25 Time: 11:12 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script language="JavaScript"> function showmenu(id){ var list = document.getElementById("list" + id); var menu = document.getElementById("menu" + id); if(list.style.display == "none"){ document.getElementById("list" + id).style.display="block"; menu.className = "title1"; }else{ document.getElementById("list" + id).style.display="none"; menu.className = "title"; } } </script> <style type="text/css"> <!-- *{margin:0;padding:0;list-style:none;font-size:14px} #nav{margin:10px;text-align:center;line-height:25px;width:200px;} .title{background:#336699;color:#000;border-bottom:1px solid #fff;cursor:pointer;} .title1{background:#888;color:#000;border-bottom:1px solid #666;cursor:pointer;} content li{color:#336699;background:#ddd;border-bottom:1px solid #fff;} --> </style> </head> <body> <div id="nav"> <div class="title" id="menu1" onclick="showmenu('1')">资料管理</div> <div id="list1" class="content" style="display:none"><%--none 此元素不会被显示--%> <ul> <li><a href="/data/pests.jsp" target="iframe_a">虫害一览</a></li> <li><a href="/data/disease.jsp" target="iframe_a">病害一览</a></li> <li><a href="/data/rodents.jsp" target="iframe_a">鼠害一览</a></li> </ul> </div> <div class="title" id="menu2" onclick="showmenu('2')">灾情防治</div> <div id="list2" class="content" style="display:none"> <ul> <li><a href="/prevention/region.jsp" target="iframe_a">区域一览</a></li> <li><a href="/prevention/manage.jsp" target="iframe_a">小班管理</a></li> <li><a href="/prevention/logging.jsp" target="iframe_a">事件记录</a></li> </ul> </div> </div> </body> </html>
右边界面
<%-- Created by IntelliJ IDEA. User: Skye Date: 2017/12/26 Time: 9:08 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> hello </body> </html>
3.重点是,在左边界面的超链接 <li><a href="/data/pests.jsp" target="iframe_a">虫害一览</a></li> 部分的target属性一定要与总的显示界面上的iframe中右边部分的name相同