Question

我一直在尝试使用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>

Answer 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>

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

1 个答案: