jQuery选项卡 - 仅在点击时加载内容

Question

我对jQuery和Web开发比较新手。

我正在使用jQuery UI Tabs来创建标签页。

但我希望只在选择特定的标签页时加载其内容。

- aLL0i

Answer 1

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

设置onclick事件

给您的选项卡添加一个类名，例如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 事件 文档，在此处。

通过ajax获取数据

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

$.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函数的更多信息，以及JQuery ajax函数的相关信息，请点击此处和此处。很抱歉我在示例中无法提供更具体的信息，但许多处理步骤确实取决于你的任务。正如已经指出的那样，你可以寻找一些JQuery插件来解决你的问题。话虽如此，学会使用JQuery手动完成这些操作也是功在当代，利在千秋的。祝你好运！

- wilsoniya

---

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

Answer 2

UI/Tabs支持通过Ajax按需加载选项卡内容，参见此示例。

- CMS

---

链接已失效，请更新。 - Tahir Alvi

Answer 3

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

此外，还可以查看LavaLamp以进行选项卡选择。它看起来非常漂亮。

- ajma

---

"Lavalamp"这个链接在我的病毒扫描器中显示出危险信息。 - UnderDog

Answer 4

默认情况下，选项卡小部件将在单击时在选项卡之间切换，但可以通过选项将事件更改为悬停。通过在选项卡上设置href，可以通过Ajax加载选项卡内容。

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

- Som

---

链接已失效，请更新。 - Tahir Alvi

Answer 5

如果你正在使用Rails，你可以尝试这个gem bettertabs。

它支持ajax选项卡。

- Zack Xu