jQuery选项卡 – 仅在单击时加载内容
我对jQuery和web开发相对较新。
我正在使用jQuery UI选项卡来创建选项卡。
但我希望只在选择特定选项卡时才加载内容。
好吧，我假设当用户点击一个标签时，你打算通过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 事件文档。
通过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手动完成这些工作绝对不会受到伤害。
祝好运。
UI / Tabs支持通过Ajax按需加载选项卡内容，请查看此示例。
通过Ajax加载内容增加了处理书签/浏览器后退按钮的复杂性。 根据您的具体情况，您应该考虑使用整页请求加载新内容。 处理书签/浏览器后退涉及在URL中添加锚信息。
另外，请查看LavaLamp以获取选项卡。 它看起来非常漂亮。
默认情况下，选项卡小部件将在onClick的选项卡式部分之间交换，但可以通过选项将事件更改为onHover。 通过在选项卡上设置href，可以通过Ajax加载选项卡内容。
来源： http ： //docs.jquery.com/UI/Tabs
如果你正在使用Rails，你可以试试这个gem
它支持ajax选项卡。