版权声明：不卑不亢,不骄不躁---好男人就是我,我就是曾哥. https://blog.csdn.net/weixin_42884584/article/details/84069641
效果：
代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/color.css"/>
<script src="<%=scriptPath%>jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
function loadTabPage(title,url) {
if ($('#tabs').tabs('exists', title)) {
$('#tabs').tabs('select', title);
return;
}
url = url + "&t=" + new Date().getTime();
/* var tabsOptions = $('#tabs').tabs('options');
console.log(tabsOptions);
var width = tabsOptions.width;
var height = tabsOptions.height - tabsOptions.tabHeight - 5; */
var page = '<iframe frameborder="0" style="width:100%;height:700px;" scrolling="auto" src="' + url + '"></iframe>';
$('#tabs').tabs('add', {
title: title,
selected: true,
closable: true,
content: page
});
}
</script>
</head>
<body>
<div id="tabs" class="easyui-tabs" style="margin:10px;">
<div title="菜单" >
<ul >
<li style="margin:10px;">
<a href="javascript:void(0)"onclick="loadTabPage('标签页一','<%=utb.getURL("xx.do") %>')">标签页一</a>
</li>
<li style="margin:10px;">
<a href="javascript:void(0)"onclick="loadTabPage('标签页二','<%=utb.getURL("xx.do") %>')">标签页二</a>
</li>
</ul>
<br>
</div>
</div>
</div>
</body>
</html>
修改版本为：点开菜单就自动加载两个页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../head.jsp"%>
<html>
<%=utb.getCSS()%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/color.css"/>
<script src="<%=scriptPath%>jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
function loadTabPage(title,url) {
/*if ($('#tabs').tabs('exists', title)) {
$('#tabs').tabs('select', title);
return;
}*/
url = url + "&t=" + new Date().getTime();
/* var tabsOptions = $('#tabs').tabs('options');
console.log(tabsOptions);
var width = tabsOptions.width;
var height = tabsOptions.height - tabsOptions.tabHeight - 5; */
var page = '<iframe frameborder="0" style="width:100%;height:700px;" scrolling="auto" src="' + url + '"></iframe>';
$('#tabs').tabs('add', {
title: title,
selected: true,
closable: false,
content: page
});
}
$(function(){
loadTabPage('xx','<%=utb.getURL("xx.do") %>');
loadTabPage('xx','<%=utb.getURL("xx.do") %>');
});
</script>
</head>
<body>
<div>
<div id="tabs" class="easyui-tabs" style="margin:10px;">
</div>
</div>
</body>
</html>