在网上找了会
后台管理系统
的模板，发现要么要钱，要么太复杂。想想算了，自己搭一个吧（我不是前端设计的，所以只是实现了功能，而且样式不太好看），如下图：
其中点击
左侧
的 “第X句” ，在右侧出现相应的选项卡 组件和内容 ；在
右侧
点击选项卡组件，对应的内容也会出现。
页面的目录
如图：（只是红框里面的，其他的是我之前弄其他的内容时创建的）
好了，说一下用到的框架：
首先
，整体页面布局是基于frame搭建的，也就是test_iframe.html页面，代码如下：（需要注意，不要把frameset放在body中，否则不显示）
管理页面搭建
其中嵌入了
left.html
和
right.html
页面，分别如下：
frame左边
<script src="js/jquery-2.2.1.js"></script>
<script>
$(function(){
/*定义函数：load页面，并且显示出来*/
var showTab = function(num){
//load页面
var eles = $(window.parent.frames["right"].document)
var main = eles.find("#myTabContent")
var url = "tabs/tab"+num+".html "+"div"
main.load(url)
//去除所有li的class----防止下一步添加的class冲突
var lis = eles.find("li")
lis.removeClass()
//显示内容
var tab = eles.find("#"+num)
tab.addClass("active")
tab.show()
}
//点击事件调用函数
$("li").each(function(){
$(this).click(function(){
showTab($(this).attr("id"))
})
})
})
</script>
选项卡
<script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.js"></script>
href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
//加载时隐藏内容
$("li").hide()
/*定义load函数，用于填充页面*/
var getCont = function(num){
var url = "tabs/tab"+num+".html "+"div"
$("#myTabContent").load(url)
}
//点击事件调用函数
$("li").each(function(){
$(this).click(function(){
getCont($(this).attr("id"))
})
})
})
</script>
然后
，说一下设计思想：test_iframe.html页面不说了，就是该标签的功能。
先说一下right.html 页面
—————————————————————————————————————————————————————————————————————-
说回right.html页面，jQuery逻辑其实很简单：
页面加载时让所有的 li 标签隐藏（没用css是因为还需要编写控制样式变化的js代码）；定义了一个函数，接着选中标题时，触发点击事件调用该函数，实现嵌入不同页面的效果。
—————————————————————————————————————————————————————————————————————-
—————————————————————————————————————————————————————————————————————-
再说left.html页面，逻辑和right页面差不多：
只是不用隐藏标签；函数同样是load tabs目录中的页面，同时多了class控制的方法—用来让右边选项卡组件随着左侧点击出现相应效果 和 show方法—用来显示right页面的对应组件部分，然后定义点击事件来调用该函数。
—————————————————————————————————————————————————————————————————————-
注意的是
：
由于是在两个不同的frame中，直接通过jQuery选取不了，需要通过如下方法才能选到相应的对象来操作：
（其中的right指的是右边的frame，只是命名恰好和我的right.html一样）
$(window.parent.frames["right"].document).find("#myTabContent")
至此
，后台管理系统的功能差不多了，需要什么页面只要在left和right页面的 ul 标签中添加相应的代码，在tabs目录下添加相应的页面就可以（注意id的命名要一致）
总结：
1.
使用frame时，不要放在body中，否则显示不了。
2.
要在bootstrap之前，先导入jQuery
3.
跨frame选取元素，需要使用 window.parent.frames[xx].document，再find相应的对象
4.
函数中load方法中的url，比如值是”tabs/tab11.html div”，注意有空格，代表只加载对应html中的div部分
LG