js如何生成动态的标签页面

抱歉。呵呵。
http://extjs.com/deploy/dev/examples/tabs/tabs-adv.html
这里有个页面，但是他上边给的js我不是完全理解了。而且应用不到我的页面中。
我想实现这样的功能。只是把button换成了一个目录树，把下边响应的页面换成一个iframe包含的页面。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

是想在一个iframe中触发某个事件后改变另一个iframe中的内容吗
是的。不过是像http://webfx.eae.net/dhtml/tabpane/tabpane.html里边的标签页面那样显示内容。
打不开那个页，呵呵
可以在左侧的iframe里面调用window.parent.function调用父页面的方法，然后在父页面里通过document.frames.frameRight.function调用右侧iframe里面的方法，从而使得左右iframe可以交互，就可以改变右侧的内容了
恩，这个我明白。谢谢你的热心回答。
在百度搜索一下tabpane吧。有很多页面可以看。
其中大部分都是固定的三四个，而我想做成动态的增加删除。呵呵。
firefox下还不行只能在ie和opera，公司不让我浪费时间了去兼容firefox了
<html>
<head>
<title>会达全面风险管理平台</title>
    <link rel="stylesheet" type="text/css" href="script/ext/resources/css/ext-all.css" />    <script type="text/javascript" src="script/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="script/ext/ext-all.js"></script>
<style type="text/css">
        html, body {
            font:normal 13px verdana;
            margin:0;
            padding:0;
            border:0 none;
            overflow:hidden;
            height:100%;
font-family:"新宋体";
        }
        .x-panel-body p {
            margin:5px;
        }
        .x-column-layout-ct .x-panel {
            margin-bottom:5px;
        }
        .x-column-layout-ct .x-panel-dd-spacer {
            margin-bottom:5px;
        }
        .settings {
            background-image:url(script/ext/shared/icons/fam/folder_wrench.png) !important;
        }
        .nav {
            background-image:url(script/ext/shared/icons/fam/folder_go.png) !important;
        }
.myicon{
            background-image:url(script/ext/shared/icons/fam/rss_go.png) !important;
}
    </style>
<script type="text/javascript">
//菜单树对象
var Tree = Ext.tree;
var tree=new Tree.TreePanel({
border:false,
animate:true,
autoScroll:true,
loader: new Tree.TreeLoader({
preloadChildren: true,
clearOnLoad: false
}),
enableDD:true,
containerScroll: true,
dropConfig: {appendOnly:true},
root:new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false, // disable root node dragging
id:'source',
children:[
{id:"subItem1",iconCls:"icon-docs",text:"子节点1",singleClickExpand:true,draggable:false,children:[
{id:"leaf11",iconCls:"myicon",text:"叶点1",
    singleClickExpand:true,leaf:true,draggable:false,
href:"http://www.baidu.com"},
{id:"leaf12",iconCls:"icon-docs",text:"叶点2",singleClickExpand:true,leaf:true,draggable:false,href:"http://www.google.cn"},
{id:"leaf13",iconCls:"icon-docs",text:"叶点3",singleClickExpand:true,leaf:true,draggable:false}
]},
    {id:"subItem2",iconCls:"icon-docs",text:"子节点2",singleClickExpand:true,draggable:false,children:[
{id:"leaf21",iconCls:"icon-docs",text:"叶点4",singleClickExpand:true,leaf:true,draggable:false},
{id:"leaf22",iconCls:"icon-docs",text:"叶点5",singleClickExpand:true,leaf:true,draggable:false},
{id:"leaf23",iconCls:"icon-docs",text:"叶点6",singleClickExpand:true,leaf:true,draggable:false}
]},
    {id:"subItem3",iconCls:"icon-docs",text:"子节点3",singleClickExpand:true,draggable:false,children:[
{id:"leaf31",iconCls:"icon-docs",text:"叶点7",singleClickExpand:true,leaf:true,draggable:false},
{id:"leaf32",iconCls:"icon-docs",text:"叶点8",singleClickExpand:true,leaf:true,draggable:false},
{id:"leaf33",iconCls:"icon-docs",text:"叶点9",singleClickExpand:true,leaf:true,draggable:false}
]}
]
})
});

//设置事件处理函数
tree.addListener("click",function(oNode,oEvt){
oEvt.stopEvent();

var oTabWindow,strNodeID,strHref;
strNodeId=oNode.id;
strHref=oNode.attributes.href;

if(oNode.isLeaf() && oNode.attributes.href){
//判断窗口是否打开，若没有打开创建新窗口打开
oTabWindow=oTabPanel.findById(strNodeId);
if(!oTabWindow){
//创建新窗体
oTabWindow=oTabPanel.add(new Ext.Panel({
id:strNodeId,
title:"新建页",
autoScroll:true,
closable:true,
html:"<div style='height:100%;height:100%'>"
+"<iframe id='ifrm_"+strNodeId+"' name='ifrm_"+strNodeId+"' src='"+strHref+"' "
+"width='100%' height='100%' frameborder=0/>"
+"</div>"
})
);
}

//设置窗体为活动窗体
        oTabPanel.setActiveTab(oTabWindow);
}
});

//页框对象
var oTabPanel=new Ext.TabPanel({
region:'center',
deferredRender:false,
items:[{
id:"panel1",
contentEl:'center1',
title: 'Close Me',
closable:true
},{
id:"panel2",
contentEl:'center2',
title: 'Center Panel'
}]
});
//设置页框处理函数，使tab页改变时刷新活动tab页
oTabPanel.addListener("tabchange",function(oTabPanel,oTab){
var oFrame=window.frames["ifrm_"+oTab.id];
if(oFrame){
oFrame.location.reload(true);
}
});

//生成左侧menu
var oMenuCard= [{
html:"you html",
title:'Navigation',
autoScroll:true,
border:false,
iconCls:'nav',
itmes:{
}
},{
title:'Settings',
html: "you html",
border:false,
autoScroll:true,
iconCls:'settings'
},{
title:'<font face="新宋体">测试</font>',
border:false,
autoScroll:true,
iconCls:'settings',
items:tree
}
];

//设置布局
var viewport;
Ext.onReady(function(){
   Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

   viewport = new Ext.Viewport({
layout:'border',
items:[{
region:"north",
id:'north-panel',
width:.99,
contentEl:"mytable1"
},{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 195,
maxSize: 400,
collapsible: true,
margins:'0 0 0 0',
cmargins:'0 0 0 0',
layout:'accordion',
layoutConfig:{
animate:true
},
items:oMenuCard
},
oTabPanel
                ]
}); //结束view对象items设置
});
</script>
</head>
<body><div id="mytable1">
<table  width="100%" border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse">
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</div><div id="center1">
    <p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
</div><div id="center2">
    <p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
</div></body>
</html>
感谢朋友们的解答。像楼上的回答里script部分有些代码我看不懂。
可能是因为我的知识水平还不够。想系统的学习javascript知识的话，大家可否为我推荐一本书。我买了一本JAVASCRIPT DOM编程正在看。不知还有什么好书可以推荐。谢谢了。推荐完书就结贴。
xingqiliudehuanghun
您好
  我运行了一下您给出的代码当我占击叶点1时会在下面这行报错
  oFrame.location.reload(true);
提示Microsoft JScript 运行时错误: 没有权限能麻烦您帮忙解决下吗