jQuery的Ajax标签

I have a menu tab in jQuery, but I have one especific tab to be loaded only when the tab is accessed.

What is happening now is: the jQuery tab works normal, BUT, this especific tab what I said is very very detrimental to the page load, so I want load it when the user click.

My current code in 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;
   });
});

The list of tabs:

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

The conatiner of tabs:

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

How can I adapt this jQuery to AJAX?

Thank you!

// 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;
});

Then in your HTML add a data attribute.

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

The .data() method will look for all data- attributes. In the if statement I'm checking to see if the data-load attribute exists on each activeTab. If it does it will make an ajax request and when that comes back successfully it will load the content into the active tab and then show it.

If it doesn't have data-load then it will just show the content.

Are you trying to roll your own tab navigation? You should take a look at the jQuery UI Tabs, if you haven't come across it already.

You can achieve what you want to do in a much simpler and, perhaps, more robust fashion. For example, if you want to have static pages for posts and profile, and load the gallery via AJAX, you can do something like this:

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

And in your JavaScript:

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