一个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="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>

你可能感兴趣的:(iframe)