这段时间需要一个后台页面，要求实现最上面导航栏、左边菜单栏、右边内容栏，点击菜单改变内容，网上百度了一波，只发现一种方法，比较遗憾，本人不相信只有一种解决方案，所以记录一波供以后扩展
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，实现更新）。