jQuery geçiş sırası

Question

Bazı div'leri değiştirmeye çalışıyorum ve aynı zamanda linklerde "aktif" bir durum ayarlıyorum. Aşağıda benim kodum.

$(".product_buy").hide(); 
$(".product_geo").hide(); 

$("a.buy, a.geo").click(function() 
    { 
     $("#" + this.className + "_" + this.rel).slideToggle("fast"); 
     $(this).toggleClass("item_active"); 

     if (this.className == "geo") 
      { 
       $("#info_" + this.rel).slideToggle("fast"); 
      } 

     return false; 
    }); 


<ul class="title_menu"> 
    <li class="item"><a href="javascript:void(0);" class="geo" rel="blabla" title="Toggle geometry">Geometry</a></li> 
    <li class="item"><a href="javascript:void(0);" class="buy" rel="blabla" title="Toggle purchase options">Buy</a></li> 
</ul> 

<div class="product_buy" id="buy_blabla"> 
    <div class="block"> 
     <p>Buy bla bla</p> 
    </div> 
</div> 

<div class="product_geo" id="geo_blabla"> 
    <img src="geo_blabla.jpg" title="Bla bla geometry" width="750" height="857"/> 
</div> 

<div class="prod_info" id="info_blabla"> 
    <p>Info bla bla</p> 
</div> 

Tümü aynı anda değil, aynı anda açılır. İki div "satın al" ve "geo" aynı anda gösteriliyor, ancak bağlantının "aktif" durumu şeyleri mahvediyor gibi görünüyor.

Ben bir kötüyüm, bu yüzden benimle dalga geçmekten çekinmeyin.

Düzeltme: Cevabı Nick'den görmeden önce çözdüm, bu yüzden çözümü muhtemelen daha iyi.

$(".product_buy").hide(); 
    $(".product_geo").hide(); 

    $("a.buy, a.geo").click(function() 
     { 
      var itemType = $(this).attr("rev"); 
      var itemName = $(this).attr("rel"); 

      $("#" + itemType + "_" + itemName).slideToggle("fast"); 
      $(this).toggleClass("item_active"); 

      if (itemType == "geo") 
       { 
        $("#info_" + itemName).slideToggle("fast"); 
       } 

      return false; 
     }); 

Answer 1

Buraya yaklaşımda tam bir değişiklik önereceğim. Böyle istediğiniz bir kimlik, bir öğeye gitmek için href kullanın:

<ul class="title_menu"> 
    <li class="item"><a href="#geo" title="Toggle geometry">Geometry</a></li> 
    <li class="item"><a href="#buy" title="Toggle purchase options">Buy</a></li> 
</ul> 

<div id="buy" class="content"> 
    <div class="block"> 
    <p>Buy bla bla</p> 
    </div> 
</div> 

<div id="geo" class="content"> 
    <div> 
    <img src="geo_blabla.jpg" title="Bla bla geometry" width="750" height="857"/> 
    </div> 

    <div class="prod_info"> 
    <p>Info bla bla</p> 
    </div> 
</div> 

Sonra jQuery da böyle, çok basit alır:

$(".content").hide(); 
$("ul.title_menu a").click(function(e) { 
    $(this.hash).slideToggle("fast"); 
    $(this).toggleClass("item_active"); 
    e.preventDefault(); 
}); 

You can test it out here. Bunun anlamı, $("#geo") seçicisinin href="#geo" seçiciyi sağ öğeyi değiştirmesidir. class="content" hepimiz ... de (diğer içerik öğelerini, like this gizleyerek bir defada yalnızca birini göstermek için bir mekanizma olarak aynı sınıf kullanabilirsiniz gizleyebilirsiniz böyledir.

diğer büyük yararı burada JavaScript etkinleştirilmeden, tüm div'ler gösterilir ve bağlantılar uygun öğeye kayar ... hala kullanıcı için çalışan güzel ve bozulmuş bir görünüm ...