commutation entre les divs avec jquery

Question

suppose que j'ai une liste d'utilisateurs ....

<a href="#">user1</a> 
<a href="#">user2</a> 
<a href="#">user3</a> 

je veux changer div contenu lié à l'utilisateur en cliquant sur et aussi vouloir aligner cette div au fond coin droit .... ie

user1 user2 user3

comment je dois le faire avec jquery et .ajax $()

Answer 1

De ma compréhension, vous voulez charger contenu utilisateur asynchrnously:

// attach this logic to the clicking of any link with class 'user' 
$("a.user").click(function(e){ 
    // prevent default behavior of link 
    e.preventDefault(); 
    // gather our username from the link 
    var username = $(this).text(); 
    // fire off a POST, containing our username 
    $.post("get-content.php", {user:username}, function(response){ 
    // set the HTML of <div id='content'></div> to whatever was received 
    $("#content").html(response); 
    // Indicates we're expecting HTML back 
    }, "html"); 
}); 

- Fonctionne avec -

<a href="#" class="user">user1</a> 
<a href="#" class="user">user2</a> 
<a href="#" class="user">user3</a> 
<div id="content"> 
    Load a users details 
</div> 

Answer 2

Vous n'avez pas nécessairement besoin d'utiliser Ajax. Il suffit de configurer les 3 divs sur la page, puis utilisez jQuery pour masquer/afficher.

$(document).ready(function() { 

    $("div.user_div").hide(); // hides all the user divs at first, so that if someone has JS disabled they'll still see the 3 divs without the hide/show effect 

    $(".users a").click(function() { 

    $("div.user_div").hide(); // hide all divs so that only one is showing at a time 

    var myClass = $(this).attr("class"); // get class of the clicked link 

    $("div."+myClass).show(); // show the div with the same class as the clicked link 

    }); 

}); 

<div class="users"> 
    <a href="#" class="user1">user1</a> 
    <a href="#" class="user2">user2</a> 
    <a href="#" class="user3">user3</a> 
</div> 

<div class="user_div user1"> 
    ...content... 
</div> 
<div class="user_div user2"> 
    ...content... 
</div> 
<div class="user_div user3"> 
    ...content... 
</div> 

Si vous ne disposez pas d'une tonne de divs pour afficher/cacher, Ajax est probablement exagéré.