jQuery 标签 - 仅在单击时加载内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/502391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Tabs - Load contents only when clicked
提问by wilsoniya
I am relatively new to jQuery and web development.
我对 jQuery 和 Web 开发比较陌生。
I am using jQuery UI Tabs to create tabs.
我正在使用 jQuery UI 选项卡来创建选项卡。
But I want the contents to be loaded only when I select a particular tab.
但我希望仅在选择特定选项卡时才加载内容。
回答by wilsoniya
OK, I assume when the user clicks a tab, you intend to fetch content dynamically, via AJAX. This really involves two things, setting an onclick even for your taband fetching the data via ajax.
好的，我假设当用户单击选项卡时，您打算通过 AJAX 动态获取内容。这实际上涉及两件事，即使为您的选项卡设置 onclick并通过 ajax 获取数据。
Setting an onclick event
设置 onclick 事件
Give your tab an class, for example my_tab. Let's say that when the user clicks the tab you want the handle_tab_click()function to fire. Here's an example of binding the onclickevent to your my_tabtab:
给你的标签一个类，例如my_tab。假设当用户单击选项卡时，您希望handle_tab_click()函数触发。这是将onclick事件绑定到my_tab选项卡的示例：
$(".my_tab").bind("click", handle_tab_click);
Your handle_tab_click()function will be given an eventargument which will be able to provide you with information on the element that fired the event (in this case, the element with class name my_tab).
您的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")) { /* ... */ }
}
See the JQuery eventdocumentation for more details here.
有关更多详细信息，请参阅此处的 JQuery事件文档。
Fetching the data via ajax
通过ajax获取数据
Fetching data will require you to invoke a remote script while supplying information about which tab was clicked (in order to fetch the appropriate information). In the following snippet, we're invoking the remote script myscript.php, supplying the HTTP GET argument tab_clicked=my_taband calling the function tab_fetch_cbwhen the script returns. The final parameter is the type of data being returned (it's up to you to choose).
获取数据将需要您调用远程脚本，同时提供有关单击哪个选项卡的信息（以便获取适当的信息）。在以下代码段中，我们调用远程脚本myscript.php，提供 HTTP GET 参数tab_clicked=my_tab并在脚本返回时调用函数tab_fetch_cb。最后一个参数是返回的数据类型（由您选择）。
$.get("myscript.php", {tab_clicked, "my_tab"}, tab_fetch_cb, "text/json/xml")
It's up to you to design myscript.phpto handle the tab_clickedparameter, fetch the appropriate data and return it (i.e. write it back out to the client).
由您来设计myscript.php来处理tab_clicked参数，获取适当的数据并将其返回（即写回客户端）。
Here's an example for tab_fetch_cb:
以下是tab_fetch_cb的示例：
function tab_fetch_cb(data, status) {
// populate your newly opened tab with information
// returned from myscript.php here
}
You can read more about the JQuery getfunction here, and JQuery ajax functions here
您可以在此处阅读有关 JQuery get函数的更多信息，在此处阅读有关JQuery ajax 函数的更多信息
I'm sorry I can't be more specific in my examples, but a lot of the processing is really dependant on your task. As it looks as it has already been pointed out, you may look to some JQuery plugins for a canned solution to your problem. That being said, it never hurts to learn how to do this stuff manually w/ JQuery.
很抱歉，我无法在示例中更加具体，但是很多处理实际上取决于您的任务。正如已经指出的那样，您可能会寻找一些 JQuery 插件来解决您的问题。话虽如此，学习如何使用 JQuery 手动完成这些事情从来没有什么坏处。
Good luck.
祝你好运。
回答by CMS
回答by ajma
Loading content via Ajax adds the complexity of dealing with bookmarking / browser back buttons. Depending on your situation, you should consider loading new content with a full page request. Handling the bookmarking/browser back involves using adding anchor info in the URL.
通过 Ajax 加载内容增加了处理书签/浏览器后退按钮的复杂性。根据您的情况，您应该考虑使用整页请求加载新内容。处理书签/浏览器返回涉及在 URL 中添加锚信息。
Also, check out LavaLampfor tab selection. It's pretty nifty looking.
另外，请查看LavaLamp以进行选项卡选择。它的外观非常漂亮。
回答by Som
By default a tab widget will swap between tabbed sections onClick, but the events can be changed to onHover through an option. Tab content can be loaded via Ajax by setting an href on a tab.
默认情况下，选项卡小部件将在 onClick 选项卡部分之间交换，但可以通过选项将事件更改为 onHover。通过在选项卡上设置 href 可以通过 Ajax 加载选项卡内容。
source: http://docs.jquery.com/UI/Tabs
回答by Zack Xu
If you're using Rails, you can try this gem bettertabs
如果你使用 Rails，你可以试试这个 gem Bettertabs
It supports ajax tabs.
它支持ajax标签。
