4

jQuery newb 和第一张海报。请温柔 :-) 我已经搜索过但找不到答案，但我确信有一个非常简单的解决方案。

希望有人可以帮助我。这是我想要实现的目标：我有一排选项卡，除了第一个选项卡之外的所有选项卡都使用单击功能将外部页面加载（）到所需的 div 中。默认情况下，第一个选项卡将加载其内容，而不是来自外部文件，而是来自页面上已经存在的 div，但出于 SEO 原因，在代码的下方。

单击任何其他选项卡会将外部页面中的内容加载到 div 中，但如果您想返回选项卡 1，则该内容不可用，因为它已被 load() 中的内容替换 - 即不再在 DOM 中。

我想我可以在调用 load() 之前 appendTo a #temp div ，然后在单击 tab 1 链接时追加回来，但是必须有一个更优雅的解决方案吗？

这是到目前为止的代码：

$(document).ready(function(){

    // default tab1 content div appended to containing div OK
    $("#innerDiv1").appendTo("#outerDiv");

    // tab2 link loads page2.html OK
    $("#link2").click(function(){
        $("#outerDiv").load("page2.html");
    });

    // This doesn't work as it's no longer in the DOM after #link2 clicked.
    $("#link1").click(function(){
        $("#innerDiv1").appendTo("#outerDiv");
    });

});

任何想法和回复都非常感谢。

在此先感谢 M

4

4 回答 4

2

大多数选项卡系统为每个选项卡都有一个单独的内容容器。单击选项卡会隐藏可见内容并显示与当前单击的选项卡关联的隐藏内容。听起来您所做的只是每次都清除 html，这需要更多的编码工作。

更强大的选项卡系统（如 jQuerUI）集成了 ajax 选项来简化您需要的许多内容。既然您说您是新手……那么使用也提供出色支持的解决方案非常值得，例如 jQueryUI

http://jqueryui.com/demos/tabs/

于 2012-03-06T17:16:18.040 回答
1

您可以尝试 jQuery 选项卡小部件：http: //jqueryui.com/demos/tabs/

它应该使您更轻松地创建选项卡式界面，并且您可以一次包含所有内容或通过 AJAX 加载，它是一个灵活的小部件。

于 2012-03-06T17:16:33.803 回答
0

我会将每个选项卡的每个#outerDiv 的内容存储在某处。您可以使用jQuery 的数据方法。或者您为每个选项卡创建一个 .outerDiv，第一次加载内容，然后只显示活动选项卡的 .outerDiv 并隐藏其余部分。

于 2012-03-06T17:15:46.880 回答
0

将#link1点击处理程序更改为此：

$("#link1").click(function() {
   $("#outerDiv").load('originalurl.html #innerDiv1');
});

this uses AJAX to load the initial page but only grabs the '#innerDiv1' section and the replaces the contents of #outerdiv with it. You will need to replace the originalurl.html with your actual URL ... could maybe use location.href unless you update that for bookmarking ?

于 2012-03-06T17:16:55.237 回答