用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;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相同