jquery ui tab跳转

1、tabs_iframe.jsp

<%–Document : tabsCreated on : 2015-2-28, 14:44:02Author: 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-IEmyWidth = 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 compatiblemyWidth = 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 : iframe2Created on : 2015-2-28, 18:21:13Author: 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();

,生命不是一场赛跑,而是一次旅行。比赛在乎终点,而旅行在乎沿途风景。

jquery ui tab跳转

相关文章:

你感兴趣的文章:

标签云: