Question

我对jQuery和web开发相对较新。

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

但我希望只有在选择特定标签时才能加载内容。

Answer 1

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

设置onclick事件

为您的标签提供一个类，例如 my_tab 。假设当用户单击选项卡时，您希望触发 handle_tab_click（）函数。以下是将 onclick 事件绑定到 my_tab 标签的示例：

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

您的 handle_tab_click（）函数将获得一个事件参数，该参数将为您提供有关触发事件的元素的信息（在本例中为类名为 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获取数据

获取数据将要求您调用远程脚本，同时提供有关单击哪个选项卡的信息（以获取相应的信息）。在下面的代码片段中，我们调用远程脚本 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 函数here和JQuery ajax函数here

的更多信息

对不起，我的示例中没有更具体，但很多处理实际上取决于您的任务。看起来已经有人指出，你可能会看一些JQuery插件来解决你的问题。话虽这么说，学习如何使用JQuery手动完成这些工作永远不会伤害。

祝你好运。

Answer 2

UI / Tabs支持通过Ajax按需加载标签内容，请查看this示例。

Answer 3

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

另外，请查看LavaLamp选项卡。看起来很漂亮。

Answer 4

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

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

Answer 5

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

它支持ajax标签。

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

5 个答案: