zoukankan      html  css  js  c++  java
  • 一个iframe,点击每个tab加载相应的页面进来iframe

    <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=" 100%; height: 100%"></iframe>
            </div>
            <div title="B" style="overflow: auto; padding: 0px;"> 
                <iframe id="B" frameborder="0" src="" style=" 100%; height: 100%;"></iframe>
            </div>
            <div title="C" style="overflow: auto; padding: 0px;">
                <iframe id="C" src="" frameborder="0" style=" 100%; height: 100%"></iframe>
            </div>
            <div title="D" style="overflow: auto; padding: 0px;">
                <iframe id="D" src="" frameborder="0" style=" 100%; height: 100%"></iframe>
            </div>
            <div title="E" style="overflow: auto; padding: 0px;">
                <iframe id="E" src="" frameborder="0" style=" 100%; height: 100%"></iframe>
            </div>
            <div title="F" style="overflow: auto; padding: 0px;">
                <iframe id="F" src="" frameborder="0" style=" 100%; height: 100%"></iframe>
            </div>
        </div>
        </div>
    </body>
    </html>
    
  • 相关阅读:
    基于VitralBox 的 OpenEuler系统 安装增强功能
    OpenEuler 操作系统 安装 银河麒麟GUI界面
    OpenEuler 操作系统的安装
    vscode 安装markdown插件 及 实用markdown语法
    无限技能下的密码系统愿景
    商用密码企业调研
    实验四 Python综合实践 ——20191331刘宇轩
    20191331 《Python程序设计》实验三报告
    9.29载入史册的一天
    人生的四天半
  • 原文地址:https://www.cnblogs.com/jiekk/p/2159743.html
Copyright © 2011-2022 走看看