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();



												


											
jquery ui tab跳转的更多相关文章
	

    
								
  1. [转]Hide or Remove jquery ui tab based on condition
		
    本文转自:http://stackoverflow.com/questions/19132970/hide-or-remove-jquery-ui-tab-based-on-condition 问:  ...
    
		
    2. 
						
  2. jquery ui tab标签
		
    <!DOCTYPE html> <html> <head> <title>tab</title> <style type=" ...
    
		
    3. 
						
  3. jquery ui 怎么实现tab标签切换效果
		
    1.效果图 2.HTML 代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...
    
		
    4. 
						
  4. ASP.NET jQuery 随笔 使用jQuery UI的Autocomplete方法实现文本框的自动搜索填充功能
		
    首先当然是去下载JQuery UI ,这里这里是下载地址http://jqueryui.com/ 第一步是点击这里 第二步选择你想要下载的主题进行下载 我这里是选择的cupertino主题包 点击圆圈 ...
    
		
    5. 
						
  5. Jquery UI
		
    jQuery UI简介 jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的 ...
    
		
    6. 
						
  6. 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug
		
    本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...
    
		
    7. 
						
  7. Struts2 JQuery UI常用插件
		
    一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行 注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...
    
		
    8. 
						
  8. 大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ Tab功能扩展完结版）
		
    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得上一篇文章吗.主要讲述了一个“Tab”插件是如何组织代码以及实现的”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方 ...
    
		
    9. 
						
  9. 大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ Tab）
		
    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得前两篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. QTP脚本--应用参数化来测试某个输入框
			
    以前一直觉得自己没有写代码的资质,太急于求成,以为一天就能写好几个功能,几千行代码,于是就没耐心了,没心情学下去了....但是最近发现其实写代码是一个漫长的过程,都是在修修改改中成长起来的.于是今天试 ...
    
			
    2. 
						
  2. RTF 格式 说明
			
    摘要: 本文对RTF文件格式进行分析研究,对RTF文件结构及特性进行了阐述,并分别列举了几个有用性的样例进行具体分析, 终于通过VB程序代码实现了一个RTF书写器(不具有所见即所得特性).本文对软件开 ...
    
			
    3. 
						
  3. python进阶八_警告和异常
			
    心情有点纠结,怎么说呢,倒不是由于其它学习上的事情,反而是由于生活上狗血的剧情逼着人偏离,渐行渐远,人跟人之间有误会也是正常的,可能是由于交流不够,彼此不够了解吧,希望能尽快度过这一段纠结的日子,简单 ...
    
			
    4. 
						
  4. Vim设置colorscheme小技巧
			
    Vim的颜色主题在/usr/share/vim/vim73/colors目录里.打开vim后在normal模式下输入":colorscheme"查看当前的主题,改动主题使用命令&q ...
    
			
    5. 
						
  5. java 注解  学习
			
    周末闲来无事,想要研究一下注解方面的知识,曾经看过几次,都忘记了,这次学习下,而且写篇文章记录下, 1.元注解  元注解是指注解的注解.包含 @Retention @Target @Document  ...
    
			
    6. 
						
  6. Cocos发展Visual Studio下一个libcurl图书馆开发环境的搭建
			
    我们解释win32在Visual Studio下一个libcurl图书馆开发环境的搭建.Cocos2d-x发动机实际上与Win32在访问libcurl库.Cocos2d-x 3.x在libcurl库文 ...
    
			
    7. 
						
  7. Oracle基于学习3--Oracle创建用户和授权
			
    Oracleserver端的操作,如以下一般: 1)       安装Oracleserver软件 2)       创建数据库(安装时自己主动创建) 3)       配置监听(安装时自己主动配置) ...
    
			
    8. 
						
  8. UML 简单的总结
			
    上某一个地方,总有个记忆挥不散,每一个深夜某一个地方,总有着最深的思量- 都说岁月无情人有情,记忆easy催人老,可有时候反倒觉着人比岁月更无情.岁月留下了我们成长的印记,但是有时候以前认为会相伴永远 ...
    
			
    9. 
						
  9. EL与JSTL注意事项汇总
			
    EL使用表达式(5一个 问题) JSTL使用标签(5问题) 什么是EL.它可以用做? EL全名Expression Language在JSP使用页面 格公式${表达式} 样例${requestScop ...
    
			
    10. 
						
  10. 微软研究院的分布式云计算框架orleans
			
    orleans   Orleans 客户端请求的消息流转以及消息在Silo中再路由机制 Witte 2015-04-29 21:58 阅读:196 评论:0     一种基于Orleans的分布式Id ...
    
			
    11.