现在的位置: 首页 > 综合 > 正文

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

2012年09月09日 ⁄ 综合 ⁄ 共 1928字 ⁄ 字号 评论关闭
<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>

抱歉!评论已关闭.