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