jQuery Tabs-仅在单击时加载内容 [英] jQuery Tabs - Load contents only when clicked

问题描述

我对jQuery和Web开发还比较陌生.

I am relatively new to jQuery and web development.

我正在使用jQuery UI Tabs创建选项卡.

I am using jQuery UI Tabs to create tabs.

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

But I want the contents to be loaded only when I select a particular tab.

推荐答案

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

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 tab and fetching the data via ajax.

设置onclick事件

为标签页提供一个类，例如 my_tab .假设当用户单击选项卡时，您要触发 handle_tab_click()函数.下面是将 onclick 事件绑定到您的 my_tab 标签的示例:

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 onclick event to your my_tab tab:

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

您的 handle_tab_click()函数将被赋予一个 event 参数，该参数可以为您提供有关触发该事件的元素的信息(在这种情况下，类名称为 my_tab 的元素.)

Your handle_tab_click() function will be given an event argument 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).

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 event 文档.此处

See the JQuery event documentation for more details here.

通过Ajax获取数据

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

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_tab and calling the function tab_fetch_cb when the script returns. The final parameter is the type of data being returned (it's up to you to choose).

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

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

It's up to you to design myscript.php to handle the tab_clicked parameter, fetch the appropriate data and return it (i.e. write it back out to the client).

以下是 tab_fetch_cb 的示例:

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

您可以在此处和JQuery ajax函数此处

You can read more about the JQuery get function here, and JQuery ajax functions here

很抱歉，我无法在示例中更具体地说明，但是很多处理过程实际上取决于您的任务.正如已经指出的那样，您可能希望使用一些JQuery插件来解决问题.话虽这么说，但学习带有JQuery的手动操作方法并没有什么害处.

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 Tabs-仅在单击时加载内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！