带有jQuery的Ajax选项卡

我在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

谢谢大家!

// 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（）

方法将查找所有

数据-

属性。在

if

语句中，我检查每个activeTab上是否存在

数据加载

属性。如果它这样做了，它将发出ajax请求，当请求成功返回时，它将把内容加载到活动选项卡中，然后显示它

---

如果它没有

数据加载

，那么它只会显示内容。

您是否正在尝试滚动您自己的选项卡导航？如果你还没有见过它，你应该看看它

你可以用一种更简单、也许更健壮的方式来实现你想要做的事情。例如，如果您想为帖子和个人资料创建静态页面，并通过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>

---

哪个标签是有问题的？请给我们看看html？你好，@Seth。非常感谢你的回复，真的！但是，如果我需要这样做：“

”，请不要工作：我该怎么办？再次感谢你，赛斯！和平。你是说当你添加

数据加载

URL时，你不能编辑HTML还是上面的代码不起作用？嗯，@Seth，再次感谢你的回复。所以，我不知道。我不知道我上面展示的方式是否正确，因为我从未使用过数据加载，但无论如何，它不起作用。你好，威廉。谢谢那么，这是一个AJAX解决方案？我不明白。@GO，我包括了一个指向jQuery UI选项卡演示页面的链接。去试试吧。它为您处理所有AJAX交互；您只需要包含一个实际的链接，而不是页面内的锚（如代码所示）。

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