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

问题描述

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

I am relatively new to jQuery and web development.

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

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.

设置点击事件

为您的标签指定一个类，例如 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 get 函数的更多信息 和 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 标签 - 仅在单击时加载内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！