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>
<%-- 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();
原文:http://blog.csdn.net/class_horse/article/details/44264515