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 函数这里

很抱歉，我不能在我的示例中更具体，但很多处理确实取决于您的任务.正如它已经指出的那样，您可能会寻找一些 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屋！