1、tabs_iframe.jsp
<%--
Document : tabs
Created on : 2015-2-28, 14:44:02
Author : liyulin lyl010991@126.com
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>tabs demo</title>
<link href="/JqueryDemo/js/jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet">
<script src="/JqueryDemo/js/jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
<script src="/JqueryDemo/js/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<script>
function WindowSize(inSize) {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
inSize=(inSize=="w")?myWidth:inSize;
inSize=(inSize=="h")?myHeight:inSize;
return inSize;
}
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">tab-1</a></li>
<li><a href="#tabs-2">tab-2</a></li>
<li><a href="#tabs-3">tab-3</a></li>
</ul>
<iframe width="100%" style="padding:0px;" frameborder="no" id="tabs-1" src="/JqueryDemo/demo/tabs/iframe1.jsp"></iframe>
<iframe width="100%" style="padding:0px;" frameborder="no" id="tabs-2" src="/JqueryDemo/demo/tabs/iframe2.jsp"></iframe>
<iframe width="100%" style="padding:0px;" frameborder="no" id="tabs-3" src="/JqueryDemo/demo/tabs/iframe3.jsp"></iframe>
</div>
</body>
</html>
<script>
$(function(){
$( "#tabs" ).tabs();
});
function adjustX(){
$("#tabs-1,#tabs-2,#tabs-3").css({
"height":WindowSize("h")-80
});
}
adjustX();
window.onresize=adjustX;
</script>
2、iframe2.jsp
<%--
Document : iframe2
Created on : 2015-2-28, 18:21:13
Author : liyulin lyl010991@126.com
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>iframe2</title>
<style>
div{
text-align: center;
margin-top: 100px;
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<div>
iframe21111
<button onclick="parent.$('a[href=#tabs-1]').click();">tab1</button>
<button onclick="parent.$('a[href=#tabs-3]').click();">tab3</button>
</div>
</body>
</html>
总结：
1、从tab2跳转到tab1：
parent.$('a[href=#tabs-1]').click();
2、从tab2跳转到tab3：
parent.$('a[href=#tabs-3]').click();