从jquery选项卡打开不同的html文件

时间:2011-07-11 04:17:52

标签: html jquery-ui-tabs

我一直在尝试使用jquery选项卡来启动html页面(在同一页面内),但不知何故反复失败。看起来很简单,但在我的所有尝试中,标签都停止工作或页面无法打开。

这是我想要实现的目标 - 我的index.html页面有多个标签(比如a,b,c)。我编写了单独的页面a.html,b.html和c.html,并希望它们在同一页面(选项卡下方)中打开,以使选项卡无所不在。什么是使这项工作最简单的方法?我试过简单地调用html页面甚至使用iframe,但似乎没有任何效果。此外,当我尝试使用iframe时,框架没有使用可用页面的完整高度,但只说20%(在最新的firefox中)。

我知道这可能是一个非常微不足道的问题,可能是由于我最后的一些愚蠢的错误造成的,但我确实花费了一个多星期的努力让这个工作起来,现在,我的智慧结束了!
任何帮助将不胜感激! 谢谢

{编辑帖子以添加相关代码段}


<body> 
    ... 
    <div id="navigation" class="menu"> 
        <ul class="tabNavigation">
            <li><a href="#A">A</a></li>
            <li><a href="#B">B</a></li>
            <li><a href="#C">C</a></li>
        </ul> 
    </div>
    <div> 
        <!--tab contents -->
        <div class="panes">
            <div id="A">A Content<p> tab A content</p>
            <iframe src="a.html"></iframe></div>
            <div id="B">B Content <p> tab B content</p>
            <iframe src="b.html"></iframe></div>
            <div id="C">C Content<p> tab C content</p>
            <iframe src="c.html"></iframe></div>
        </div>
    </div>

    <!-- JS to activate the tabs -->
    <script>
        $(function()
        {
            var tabContainers = $('div.tabs > div');
            $('div.tabNavigation ul.tabs a').click(function()
            {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();

                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');

                return false;
            }).filter(':first').click();
        });
    </script>
</body>

1 个答案:

答案 0 :(得分:1)

{使用特定代码编辑} 您可以简单地将标签放在每个页面上。页面将重新加载,但选项卡将在同一位置。

如果重新加载困扰你,你将不得不使用javascript调用html页面的内容。

此脚本将调出页面中的html并将html放入具有相应字母的div的窗格中。这应该是你想要用iframe实现的,但当然没有iframe。

<script type="text/javascript">
$(document).ready(function() {
    $.get("a.html", function(data){
        $(#A).append(data);
    });

    $.get("b.html", function(data){
        $(#B).append(data);
    });

    $.get("c.html", function(data){
        $(#C).append(data);
    });
});
</script>