jquery ile divlere arasında geçiş

2 Cevap php

i kullanıcıların bir listesi var herhalde ....

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

ben de bunun üzerine tıklayın ve yani .... sağ alt köşesinde o div hizalamak isterken kullanıcıya ilgili div içeriğini geçmek istiyorum

birey1 birey2 birey3

jQuery ve $ ile bunu nasıl. ajax ()

2 Cevap

Benim anlayış, sen asynchrnously kullanıcı-içerik yüklemek istiyorum:

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

- İşleri -

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

Mutlaka Ajax kullanmanız gerekmez. Sadece sayfada 3 divs kurmak ve ardından / göstermek gizlemek için jQuery kullanmak.

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

Eğer göstermek / gizlemek için divlere bir ton yoksa, Ajax muhtemelen overkill olduğunu.

etiketler