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>
    
  • 相关阅读:
    SRF 认证
    Python getattr
    jQueryattr()与prop()之间的区别
    鼠标事件(拖拽)
    Python中操作MySQL的模块---pymsql
    C++ 存储类
    C++ 修饰符类型
    C++ 变量作用域
    C++ 变量类型
    C++ 数据类型
  • 原文地址:https://www.cnblogs.com/jiekk/p/2159743.html
Copyright © 2011-2022 走看看