1.jquery框架自帶了一個框架，直接有利於後臺開發，下載最新版的jquery esay ui使用引用jshe css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EsayUI</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
bindevent();
});
function bindevent()
{
$('.menuitem').click(function(){
var title=$(this).text();
//jquery esy ui中tabs帶的判斷方法，判斷該tab項是否存在用，title來判斷
var isExt=$('#tt').tabs('exists',title);
//給tab頁添加上標籤
if(isExt)
{
<span style="font-size:18px;"></span><pre name="code" class="html"> //jquery esy ui選中該tab，title參數return;
}
$('#tt').tabs('add',{
title: $(this).text(),
content: ShowContent($(this).data('url')),
closable: true
});
});
}
function ShowContent(url)
{
var strhtml='<iframe src="'+url+'" border="no" scrolling="no" height="100%" width="100%" frameborder="0"></iframe>';
alert(strhtml);
return strhtml;
}
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">標題</div>
<div data-options="region:'west',split:true,title:'菜單欄'" style="width:150px;padding:0px;">
<div class="easyui-accordion" style="width:100%;height:100%">
<div title="新聞管理" data-options="iconCls:'icon-no'" style="overflow:auto;padding:0px;">
<ul>
<li>
<a href="javascript:void(0);" class="menuitem">新聞管理1</a>
<ul>
<li>
<a href="javascript:void(0);" class="menuitem" data-url="ttt.html">新聞管理11</a>
</li>
<li>
<a href="javascript:void(0);" class="menuitem">新聞管理12</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menuitem">新聞管理2</a>
</li>
<li>
<a href="javascript:void(0);" class="menuitem">新聞管理3</a>
</li>
</ul>
</div>
<div title="評論管理" data-options="iconCls:'icon-help'" style="padding:10px;">
<p>第二個菜單</p>
</div>
</div>
</div>
<!-- <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
-->
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">底部</div>
<div data-options="region:'center',title:'首頁'">
<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px" fit="true"></div>
</div>
</body>
</html>