第一种:这里使用到了easyui+ssm
<body class="easyui-layout">
<div data-options="region:'west',title:'列表',split:true" style="width:200px;">
<a href="javascript:openTab('首页','test/welcome','icon-writeblog')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-writeblog'" style="width: 150px">首页</a>
</div>
<div data-options="region:'center',title:''" style="padding:5px;background:#eee;">
<div id="tabs" class="easyui-tabs" style="height:250px;">
<div title="最新发布十篇" style="padding:20px;display:none;">
最新发布十篇
</div>
</div>
</div>
<script>
/**
* 打开新选项卡
* @param text 标题
* @param url 路径
* @param icon 图标
*/
function openTab(text,url,icon) {
//判断当前选项卡是否存在
if($('#tabs').tabs('exists',text)){
//如果存在 显示
$("#tabs").tabs("select",text);
}else{
//如果不存在 则新建一个
$("#tabs").tabs('add',{
title:text,
closable:true, //是否允许选项卡摺叠。
iconCls:icon, //显示图标
content:"<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src='"+url+"'></iframe>"
//url 远程加载所打开的url
})
}
}
</script>
</body>
此种方式是以linkbutton跳转到JavaScript并传递url(为控制器映射地址) 然后在选项卡中显示控制器返回的url地址页面