一个iframe,点击每个tab加载相应的页面进来iframe

最新推荐文章于 2022-07-18 20:36:48 发布
最新推荐文章于 2022-07-18 20:36:48 发布
阅读量1.7k 收藏 2
点赞数
分类专栏： JSP使用心得与体会 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qixiaowei_888/article/details/84496671
版权
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <title></title>
    <link href="../gstyle/listpage.css" rel="stylesheet" type="text/css" />
    <link href="../gstyle/easyui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../javascript/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../javascript/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../javascript/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        $(function () {
            //设置自适应高度
            $('#tt').height(window.document.documentElement.scrollHeight-40);
            $('#tt').tabs({
                onSelect: function (title) {
                    loadHtmlFile(title);
                }
            });
        });
 
        function loadHtmlFile(title) {
            switch (title) {
                case "A":
                    {
                        $("#A").attr("src", "A_Tab.htm");
                        break;
                    }
                case "B":
                    {
                        $("#B").attr("src", "B_Tab.htm");
                        break;
                    }
                case "C":
                    {
                        $("#C").attr("src", "C_Tab.htm");
                        break;
                    }
                case "D":
                    {
                        $("#D").attr("src", "D_Tab.htm");
                        break;
                    }
                case "E":
                    {
                        $("#E").attr("src", "E_Tab.htm");
                        break;
                    }
                case "F":
                    {
                        $("#F").attr("src", "F_Tab.htm");
                        break;
                    }
            }
        }
 
        $(window).resize(function () {
            resizeTabs();
        });
        function resizeTabs() {
            $('#tt').tabs('resize');
        }
    </script>
</head>
<body>
    <div class="bodyDiv">
    <div id="tt" class="pagetabs">
        <div title="A" style="overflow: auto; padding: 0px;">
            <iframe id="A" src="" frameborder="0" style="width: 100%; height: 100%"></iframe>
        </div>
        <div title="B" style="overflow: auto; padding: 0px;"> 
            <iframe id="B" frameborder="0" src="" style="width: 100%; height: 100%;"></iframe>
        </div>
        <div title="C" style="overflow: auto; padding: 0px;">
            <iframe id="C" src="" frameborder="0" style="width: 100%; height: 100%"></iframe>
        </div>
        <div title="D" style="overflow: auto; padding: 0px;">
            <iframe id="D" src="" frameborder="0" style="width: 100%; height: 100%"></iframe>
        </div>
        <div title="E" style="overflow: auto; padding: 0px;">
            <iframe id="E" src="" frameborder="0" style="width: 100%; height: 100%"></iframe>
        </div>
        <div title="F" style="overflow: auto; padding: 0px;">
            <iframe id="F" src="" frameborder="0" style="width: 100%; height: 100%"></iframe>
        </div>
    </div>
    </div>
</body>
</html>
临海听风_518
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS页面跳转和js对iframe进行页面跳转、刷新
01-30
JS页面跳转和js对iframe进行页面跳转、刷新
多TAB页管理管理后台 用iframe加载页面使用注意事项：iframe高度自适应，内外部js相互调用等
chuangxin的专栏
07-30 3425
使用iframe实现多tab页后台管理是一种普遍的处理方式，尤其在企业信息化WEB应用中更是常见。使用iframe实现多tab页虽说很简单，但在实际项目应用中也需要注意几个问题：iframe高度自适应问题，iframe页面切换内存泄漏问题，iframe页面js代码与父页面js代码如何相互调用问题。
LayUI之动态选项卡Tab&iframe使用
m0_62604616的博客
07-18 1354
可以看见已经更改了，但是有重复的，所以我们要进行再一次的优化。将官网中任意一种选项卡的代码复制下来，粘贴到你要用的地方。然后我们PermissionDao这个类也进行改动。①、查找layui的选项卡页面布局代码--静态。④重复的tab选项卡不添加，改为选中。只要将openTab方法进行改动即可。③优化UserAction。③、将选项卡名称换成菜单名。①创建实体类User。...
[原]jQuery Tab插件，用于在Tab中显示iframe，附源码和详细说明
weixin_30696427的博客
06-25 188
最近有个需求，需要在Tab中放置iFrame，于是做了一个jQuery的Tab插件。 欢迎提bug或是建议，在有空的情况下我尽量完善。 作者: think8848（公司主页: http://www.cleversoft.com, QQ: 166156888, Blog: http://think8848.cnblogs.com) 转载请保留此信息 CleverTabs是一款jQuery...
使用Iframe实现TAB页面切换
iteye_14360的博客
05-15 1854
[code="java"] package com.it.springweb.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web...
点击a标签，跳转到iframe中，并在iframe中显示指定的页面
八月
11-18 1403
1、用a标签的target属性 　<iframe id="myFrameId" name="myFrameName" scrolling="no" frameborder="0"></iframe> 　　<a href="../XX.action?codeInfo=Demo123" target="myFrameName" >跳转</a> 　　上面a...
基于js的iframe 可关闭tab标签组件使用方法
01-12
在我们的组件中，每个tab页将由一个iframe展示，每个iframe加载不同的网页内容。 接下来，我们来看`tab`标签。在UI设计中，tab是一种常见的布局方式，用户可以通过点击不同的tab来显示或隐藏相关的内容区域。在...
jquery tab 切换页面 支持iframe
11-12
在支持`iframe`的场景下，每个内容区域将是一个`iframe`元素，用于加载外部页面。 以下是实现这个功能的关键步骤： 1. **HTML结构**：首先，我们需要在HTML中定义Tab的结构，包括导航项（通常为`<li>`元素）和内容...
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
10-21
EasyUI的Tabs是一个多标签页容器，它可以容纳多个子页面，每个子页面通常包含一个iframe，用于加载不同的内容。这种设计模式在现代Web应用中非常常见，因为它允许各个功能模块独立加载和更新，提高了用户体验。 要...
jquery iframe tab实例(5个不同tab实例)
06-19
这个基本实例展示了如何创建一个简单的tab系统，每个tab对应一个iframe，用于加载不同的网页内容。通过jQuery的选择器和事件处理，实现点击tab时切换iframe的src属性，加载相应的内容。 ### 实例二：动态添加tab ...
iframe 方式实现 tab 页,首页主动加载,其它页点击时加载
图画hadoop
08-16 488
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html;.
【2】案例：Bootstrap 开发 - navs 左侧菜单，使用iframe 嵌入*.html实现动态切换页面
热门推荐
YYDataV的博客
12-23 1万+
一、效果展示 1、div实现效果 2、iframe实现效果 二、左侧菜单栏样式 菜鸟左侧菜单栏中有5个示例，基本满足了大部分场景需求。 参考文档：Bootstrap5 侧边栏导航(Offcanvas) | 菜鸟教程 我这里采用的是第4个样式，这个样式只展示了左侧菜单栏。 接下来我将实现左侧菜单栏和右侧主界面的联动跳转。 三、菜单栏和右侧主界面的联动跳转 有2中比较常用的实现方式： 1、使用div实现主界面切换 实现思路 动态监听 a 的 click事件；..
【Layui】layui中iframe子页面中的链接点击后在父页面中动态添加tab选项
德仔
06-01 758
iframe子页面的主要HTML结构（js文件是在子页面中引入）： 添加异常履历 效果：
一个后台的iframe版的架构
胡世林的博客
12-07 5283
目的： 使用类似layui的iframe版的后台管理系统。   过程： 1.本来打算是使用vue-ivew的后台管理系统模板，而且已经基本熟练掌握了，但是！队友对vue不太了解，果断放弃 2.本来打算使用layui-iframe版本的后台管理系统。但是！穷！！！！！而且界面跟要求的不一致（穷！）。。。 3.自己写一个得了。真蛋疼。。。 支持： jquery（后面可能会用到，所以就先...
iframe标签 实现的页面部分刷新
liu709127859的专栏
06-22 1822
&lt;script src="js/jquery.js"&gt;&lt;/script&gt; &lt;script src="js/js.js"&gt;&lt;/script&gt; &lt;script src="js/time.js"&gt;&lt;/script&gt; &lt;script&gt; $(document).
jquery中对 iframe的操作
weixin_34061555的博客
12-01 153
我们先看一下 JQUERY中的对像 contents()　的帮助文件 contents() 概述 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容 示例 描述: 查找所有文本节点并加粗 HTML  代码: &lt;p&gt;Hello &lt;a href="http://ejohn.org/"&gt;John&lt;/a&gt;, how are ...
解决bootstrap标签页切换中ifram引入的外部链接显示出现问题（layui也差不多）最新更新
IT_CREATE的博客
04-17 2938
先看一段代码： <div style="width: 100%"> <ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#information" data-toggle="tab">★销售人员信息</a> ...
详细描述一下如何通过一个iframe标签来加载HTML页面
最新发布
03-22
可以通过以下步骤来通过一个iframe标签来加载HTML页面： 1. 在HTML文档中添加一个iframe标签，例如： <iframe src="page.html"></iframe> 2. 在src属性中指定要加载的HTML页面的URL，可以是相对路径或绝对路径。 3. 可以使用其他属性来控制iframe的大小、边框、滚动条等，例如： <iframe src="page.html" width="500" height="300" frameborder="0" scrolling="no"></iframe> 4. 当页面加载时，iframe将显示指定的HTML页面。可以在iframe中嵌套其他HTML元素，例如表单、图像、视频等。 需要注意的是，使用iframe标签加载外部HTML页面可能会导致安全问题，因此应该谨慎使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值