Question

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

希望有人可以帮助我。这是我正在尝试实现的：我有一行选项卡，除了第一个选项卡之外的所有选项卡都使用单击功能将外部页面加载（）到所需的div中。第一个选项卡默认情况下会加载其内容，而不是来自外部文件，而是来自页面上已有的div，但是出于搜索引擎优化的原因，它会进一步下载代码。

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

我想我可以在调用load（）之前附加到#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");
    });

});

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

提前致谢中号

Answer 1

大多数标签系统为每个标签都有一个单独的内容容器。单击选项卡会隐藏可见内容，并显示与单击的当前选项卡关联的隐藏内容。听起来你正在做的就是每次都清除html，这会增加编码工作量。

像jQuerUI这样更强大的标签系统集成了ajax选项，以简化您需要的许多内容。既然你说你是新手......那么使用也提供出色支持的解决方案是值得的，比如jQueryUI

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

Answer 2

您可以尝试使用jQuery标签小部件：http://jqueryui.com/demos/tabs/

它应该让您更容易创建标签界面，并且您可以一次包含所有内容或通过AJAX加载，它是一个灵活的小部件。

Answer 3

我会为每个标签存储每个#outerDiv的内容。您可以使用jQuery's data method。或者为每个选项卡创建一个.outerDiv，第一次加载内容然后只显示活动选项卡的.outerDiv并隐藏其余选项。

Answer 4

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

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

这使用AJAX加载初始页面，但只抓取'＃innerDiv1'部分，并用它替换#outerdiv的内容。您需要将originalurl.html替换为您的实际网址...可能会使用location.href，除非您更新了这个用于添加书签的内容吗？

在click功能中使用appendTo和Load

4 个答案: