這段時間需要一個後臺頁面，要求實現最上面導航欄、左邊菜單欄、右邊內容欄，點擊菜單改變內容，網上百度了一波，只發現一種方法，比較遺憾，本人不相信只有一種解決方案，所以記錄一波供以後擴展
target屬性解決方案
這個方案就是充分利用target屬性的特性來解決，所謂target就是對應某個（內嵌）框架（個人理解，想有自己的體會百度），理所當然的是配和（內嵌）框架使用。目前我接觸到（內嵌）框架只有frameset（框架集）、iframe（內嵌框架）。所以我接下來主要介紹target配合兩種框架使用來實現內容跳轉。
1 target和frameset使用
步驟一：定義頁面分佈
就是設置frameset裏面有幾個frame，怎麼佈局（這裏我不詳解，這是舉個例子），相關代碼index.html如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
// cols表示frame集合的各自寬度（第一個100，第二個剩餘），其他屬性就不說，自己學習
<frameset cols="100,*" frameborder="no" border="0" framespacing="0">
// 這裏src裏面的路徑是相對路徑（我當時文件的相對路徑）
<frame src="WEB-INF/jsp/left.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
<frame src="WEB-INF/jsp/main.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
</head>
<noframes>
<body>
</body>
</noframes>
</html>
步驟二：編輯frame的src，實現相關跳轉：
相關代碼如下：
// left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="main.html" target="mainFrame">go main</a>
<a href="main2.html" target="mainFrame">go main2</a>
</body>
</html>
// main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>main</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>main2</p>
</body>
</html>
注：以上這個列子非常簡單，但是也是非常經典的。步驟分兩步只是便於理解，接觸更多的相關知識的讀者，感覺分一步都可以。
2 target配合iframe使用
步驟一：設置頁面內部跳轉的iframe（感覺命名有點彆扭）
就是設置需要在頁面哪部分實現頁面內部跳轉，相關代碼如下：
// index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<li><a href="./WEB-INF/jsp/A.html" target="con">跳轉A</a></li><br/>
<li><a href="./WEB-INF/jsp/B.html" target="con">跳轉B</a></li><br/>
// 這裏就是實現跳轉的的iframe
<iframe name="con" src="./WEB-INF/jsp/A.html"></iframe>
</body>
</html>
**步驟二：編輯iframe的src，同時編寫頁面跳轉邏輯
相關代碼如下：
// A.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body style="height: 100%;overflow: hidden;">
<h4>A頁面</h4>
<button id="bt">傳參</button>
<script src="../../js/jquery.min.3.40.js"></script>
<script type="text/javascript">
$(function(){
$('#bt').on('click', function(){
var name="跳轉成功";
window.open('B.html?name='+name, 'con', null, false);
});
});
</script>
</body>
</html>
// B.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body style="height: 100%;overflow: hidden;">
<h4>B頁面</h4>
<button id="bt">獲取參數</button>
<script src="../../js/jquery.min.3.40.js"></script>
<script type="text/javascript">
$(function(){
var str=this.location.search;
var val1=str.split("name=");
var val2=val1[1];
//url解碼
val2=decodeURI(val2);
$('#bt').on('click', function(){
alert(val2);
});
});
</script>
</body>
</html>
注：以上代碼還實現了一個客戶端與服務器交換數據。
總結
以上我講的主要就是target配合兩個（內嵌）框架實現頁面跳轉，至於跳轉邏輯一筆帶過，所以接下來簡單的總結一下頁面target配合（內嵌）框架的跳轉邏輯（跳轉方式多樣，最常見的是window.location.href，自己百度）。但是跳轉不是唯一的解決方案，target配合（內嵌）框架實現刷新也能解決（用jquery操作（內嵌）框架的src，實現更新）。