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

发布于 2024-11-19 03:52:17 字数 1939 浏览 6 评论 0原文

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

原文

I have been trying to use jquery tabs to launch html pages(within the same page) but somehow failing at it repeatedly. Seems like a simple enough thing, but in all my attempts either the tabs stop working or the page doesn't open.

Here's what I am trying to achieve - my index.html page with multiple tabs(say a,b,c). i have the individual pages a.html, b.html and c.html written and want them to be opened in the same page(below the tabs) such that the tabs are omnipresent. What would be the easiest way to get this working? I have tried simply calling the html pages or even using iframes, but nothing seems to work. Also, when I tried using iframes, the frame wasn't using the full height of the page available to it, but only say 20% of it(in latest firefox).

I know this is probably too trivial a question and might have been caused by some silly mistake at my end, but I have literally spent more than a week in trying to get this to work and am,now, at my wit's end!
Any help would be much appreciated!
Thanks

{ edited the post to add relevant code snippets}

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

赢得她心 2024-11-26 03:52:17

{用具体代码编辑}
您可以简单地将选项卡放在每个页面上。页面将重新加载，但选项卡将位于同一位置。

如果重新加载让您烦恼，您将不得不使用 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>

{Edited with specific code}
You could simply put the tabs on every page. The pages will reload but the tabs will be in the same place.

If the reload bothers you you're going to have to call the content of the html pages using javascript.

This script will call the html out of the pages and put the html into the panes of the divs with corresponding letters. This should serve what you are trying to achieve with iframes but without the iframes of course.

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

回复收藏 0 原文

~没有更多了~