Question

我在jQuery中有一个菜单选项卡，但是只有在访问该选项卡时才会加载一个特定的选项卡。

现在发生的事情是：jQuery选项卡工作正常，但是，这个特定的选项卡我所说的非常非常不利于页面加载，所以我想在用户点击时加载它。

我在jQuery中的当前代码：

$(document).ready(function() {
// Quando a página carrega...
$(".tab_content").hide(); // Esconde todo o conteúdo
$("ul.tabs li:first").addClass("active").show(); // Ativa a primeira aba
$(".tab_content:first").show(); // Mostra o conteúdo da primeira aba

// Evento ao clicar
$("ul.tabs li").click(function() {

    $("ul.tabs li").removeClass("active"); // Remove toda classe "ativa"
    $(this).addClass("active"); // Adiciona a classe "ativa" na aba
    $(".tab_content").hide(); // Esconde todo o conteúdo da aba

    var activeTab = $(this).find("a").attr("href"); // Procura o atributo href para selecionar o conteúdo e a aba
    $(activeTab).show(); // Fade na aba ativa

    return false;
   });
});

标签列表：

                <ul class="tabs">
                            <li><a href="#user-posts">posts</a></li>
                            <li><a href="#user-profile">perfil</a></li>
                            <li><a href="#user-gallery">galeria</a></li>
                            <li><a href="#user-friends">amigos</a></li>
                            <li><a href="#user-mp">mensagens pessoais</a></li>
                </ul>

标签的内容：

                <div class="tab_container">
                    <?php include("includes/posts/posts.inc.php"); ?>
                    <?php include("includes/infos.inc.php"); ?>
                    <?php include("includes/amigos.inc.php"); ?>
                    <?php include("includes/galeria.inc.php"); ?>
                    <?php include("includes/mps.inc.php"); ?>
                </div>

如何使这个jQuery适应AJAX？

谢谢！

Answer 1

// Evento ao clicar
$("ul.tabs li").click(function() {

    $("ul.tabs li").removeClass("active"); // Remove toda classe "ativa"
    $(this).addClass("active"); // Adiciona a classe "ativa" na aba
    $(".tab_content").hide(); // Esconde todo o conteúdo da aba

    var activeTab = $(this).find("a").attr("href"), // Procura o atributo href para selecionar o conteúdo e a aba
        $activeTab = $(activeTab); // Objeto jQuery em cache

    // Se a guia requer ajax
    if ( $activeTab.data('load') ) {

        $.ajax({
            url: $activeTab.data('load'),
            success: function( data ) {
                $activeTab.html(data).show();
            }
        });

    } else {
        $activeTab.show(); // Fade na aba ativa
    }

    return false;
});

然后在您的HTML中添加数据属性。

<li data-load="http://www.example.com/your/url.html">Content</li>

.data()方法将查找所有data-属性。在if语句中，我正在检查每个activeTab上是否存在data-load属性。如果是这样，它将发出ajax请求，当成功返回时，它会将内容加载到活动选项卡中，然后显示它。

如果它没有data-load，那么它只会显示内容。

Answer 2

您是否尝试滚动自己的标签导航？如果您还没有看过，请查看jQuery UI Tabs。

您可以用更简单，也许更强大的方式实现您想要的目标。例如，如果您想拥有帖子和个人资料的静态页面，并通过AJAX加载图库，您可以执行以下操作：

<div id="tabs">
    <ul>
        <li><a href="#user-posts">posts</a></li>
        <li><a href="#user-profile">perfil</a></li>
        <li><a href="url/to/galeria.php">galeria</a></li>
    </ul>

    <div id="user-posts">
        <?php include("includes/posts/posts.inc.php"); ?>
    </div>
    <div id="user-profile">
        <?php include("includes/infos.inc.php"); ?>
    </div>
</div>

在你的JavaScript中：

$(function() {
    $( "#tabs" ).tabs();
});

使用jQuery的Ajax选项卡

2 个答案: