第一种方法，在你的代码基础上：
1、假设左边tree的html结构：
//注意以上a元素的link属性代表中间将要显示的页面的名称,根据需要自行修改
2、引入jquery库，在head之间添加如下代码：
$(function(){
var $tree_a = $("#tree").find("a");//获取tree中的a元素集合
var $main = $("#main");//获取中间部分元素
$tree_a.on("click", function(){
$main.empty();//初始化
var $frame =$("
");//定义框架对象
var $this = $(this);//当前被点击的tree的a
$frame.attr({//设置中间部分框架的属性
"src": $this.attr("link"),//框架引入的页面地址
"name": "main_frame",//框架名称
"width": $main.width() || "100%",//框架宽度
"height": $main.height() || "100%",//框架高度
"frameborder": "0",//框架边框
"scrolling": "auto"//框架滚动条设置
});
$frame.appendTo($main);//将框架插入到中间部分
});
});
第二种方法，改变你的代码结构：
1、修改html结构，将中间部分更改为iframe
将
中间
