jQuery 选项卡 - 仅在单击时加载内容答案

【问题标题】：jQuery Tabs - Load contents only when clickedjQuery 选项卡 - 仅在单击时加载内容
【发布时间】：2009-02-02 06:52:16
【问题描述】：

我对 jQuery 和 Web 开发比较陌生。

我正在使用 jQuery UI 选项卡来创建选项卡。

但我希望仅在选择特定选项卡时才加载内容。

【问题讨论】：

标签： jquery-ui jquery tabs

【解决方案1】：

好的，我假设当用户单击选项卡时，您打算通过 AJAX 动态获取内容。这实际上涉及两件事，为您的标签设置 onclick 和 通过 ajax 获取数据。

设置点击事件

给你的标签一个类，例如my_tab。假设当用户单击您希望 handle_tab_click() 函数触发的选项卡时。这是将 onclick 事件绑定到您的 my_tab 选项卡的示例：

$(".my_tab").bind("click", handle_tab_click);

您的 handle_tab_click() 函数将获得一个 event 参数，该参数能够为您提供有关触发事件的元素的信息（在本例中，类名为 my_tab 的元素）。

function (event) {
    if ($(event.target).hasClass("my_tab")) { /* handle tab click */ }
    if ($(event.target).hasClass("my_tab_2")) { /* a different tab click */ }
    if ($(event.target).hasClass("my_tab_3")) { /* ... */ }
}

有关更多详细信息，请参阅 JQuery 事件文档here。

通过 ajax 获取数据

获取数据需要您调用远程脚本，同时提供有关单击了哪个选项卡的信息（以便获取适当的信息）。在下面的 sn-p 中，我们调用远程脚本 myscript.php，提供 HTTP GET 参数 tab_clicked=my_tab 并调用函数 tab_fetch_cb em> 当脚本返回时。最后一个参数是返回的数据类型（由您选择）。

$.get("myscript.php", {tab_clicked, "my_tab"}, tab_fetch_cb, "text/json/xml")

由您来设计myscript.php 来处理tab_clicked 参数，获取适当的数据并将其返回（即写回客户端）。

这是 tab_fetch_cb 的示例：

function tab_fetch_cb(data, status) {
    // populate your newly opened tab with information 
    // returned from myscript.php here
}

您可以阅读更多关于 JQuery get 函数 here 和 JQuery ajax 函数 here

很抱歉，我不能在我的示例中更具体，但是很多处理确实取决于您的任务。正如已经指出的那样，您可能会查看一些 JQuery 插件来为您的问题提供罐装解决方案。话虽如此，学习如何使用 JQuery 手动完成这些工作永远不会有什么坏处。

祝你好运。

【讨论】：

使用 jQuery UI 的 Tab 插件更容易。请参阅下面的 CMS 评论。

【解决方案2】：

UI/Tabs 支持通过 Ajax 按需加载选项卡内容，查看this 示例。

【讨论】：

链接失效，请更新。

【解决方案3】：

通过 Ajax 加载内容会增加处理书签/浏览器后退按钮的复杂性。根据您的情况，您应该考虑使用整页请求加载新内容。处理书签/浏览器返回涉及使用在 URL 中添加锚信息。

另外，请查看LavaLamp 以了解选项卡选择。挺好看的。

【讨论】：

指向“lavalamp”的链接在我的病毒扫描仪中显示了危险信息。

【解决方案4】：

默认情况下，选项卡小部件将在 onClick 选项卡部分之间交换，但可以通过选项将事件更改为 onHover。通过在选项卡上设置 href，可以通过 Ajax 加载选项卡内容。

来源：http://docs.jquery.com/UI/Tabs

【讨论】：

链接失效，请更新。

【解决方案5】：

如果你使用 Rails，你可以试试这个 gem bettertabs

它支持 ajax 选项卡。

【讨论】：