第一步：

<div id="cc" class="easyui-layout" fit=true><div region="north" title="North Title" split="false"style="height: 100px;"></div><div region="west" split="true" title="West" style="width: 300px;" ><div id="aa" class="easyui-accordion"style="width: 300px; height: 200px;" fit=true><div title="Title1" iconCls="icon-save"style="overflow: auto; padding: 10px;"><h3 style="color: #0099FF;">Accordion for jQuery</h3><p>Accordion is a part of easyui framework forjQuery. It letsyou define your accordion component on web page more easily.</p></div><div title="Title2" iconCls="icon-reload" selected="true"style="padding: 10px;">content2</div><div title="Title3">content3</div></div></div><div region="center" title="center title"style="padding: 5px; background: #eee;" href="index.jsp"><div id="tt" class="easyui-tabs" style="width: 500px; height: 250px;"><div title="Tab1" style="padding: 20px; display: none;">tab1</div><div title="Tab2" closable="true"style="overflow: auto; padding: 20px; display: none;">tab2</div><div title="Tab3" iconCls="icon-reload" closable="true"style="padding: 20px; display: none;">tab3</div></div></div></div>

第二步：

<div id="cc" class="easyui-layout" fit=true><div region="north" title="layout实战" split="false"style="height: 100px;"></div><div region="west" split="true" title="菜单" style="width: 300px;" iconCls="icon-ok" ><div id="aa" class="easyui-accordion"style="width: 300px; height: 200px;" fit=true><div title="用户管理" style="overflow: auto; padding: 10px;"></div>
//手风琴selected ，会默认展开，<div title="岗位管理" selected="true" style="padding: 10px;">content2</div><div title="权限管理">content3</div><div title="资源管理">content3</div></div></div><div region="center" title="主菜单"style="padding: 5px; background: #eee;" ><div id="tt" class="easyui-tabs" style="width: 500px; height: 250px;" fit=true></div></div></div>

第三步：

点击左边的菜单，中间能弹出tab页，左边的菜单对应右边的tab，如果过有了，就不能再创建新的tab页

    $("p>a[title]").click(function(){var src=$(this).attr("title");//获取title中的值，var title=$(this).text();if($("#tt").tabs("exists",title)){//有了，就不能再创建新的tab页$("#tt").tabs("select",title);//将已经创建的tab选中，不再穿件新的}else{//动态创建tab$("#tt").tabs("add",{title:title,content:"<iframe frameborder=0 style=width:100%;height:100% src="+src+"></iframe>"//内容区其实就是iframe})}})});

    <div id="cc" class="easyui-layout" fit=true><div region="north" title="layout实战" split="false" style="height:100px" ></div><div region="west" split="true" title="菜单" style="width: 300px;" iconCls="icon-ok" ><div id="aa" class="easyui-accordion"style="width: 300px; height: 200px;" fit=true><div title="用户管理" style="overflow: auto; padding: 10px;"><p><a title="jsp1/001_message.jsp" >用户列表</a></p><p><a title="jsp1/002_window.jsp" >用户新增</a></p></div><div title="岗位管理" selected="true" style="padding: 10px;">content2</div><div title="权限管理">content3</div><div title="资源管理">content3</div></div></div><div region="center" title="主菜单"style="padding: 5px; background: #eee;" ><div id="tt" class="easyui-tabs" style="width: 500px; height: 250px;" fit=true>//动态创建tab页，不是写死，点击左边菜单超链接，右边创建对应的tab</div></div></div>