Aide Jquery avec le menu de l'onglet de gauche

Question

Cela ne devrait vraiment pas être si compliqué, mais ne peut pas le comprendre. Avoir plusieurs onglets verticalement sur la gauche le long de la section du contenu du corps.

Lors du chargement de la page, l'affichage «leftKanji» css =: aucun. Vous voulez quand la souris entre dans la classe "leftTab" ou "leftTab", puis "leftKanji" css = disply: block

Actuellement, tous les "leftKanji" s'affichent ou se cachent, pas celui avec lequel la souris survole. Le bonus serait si je peux ajouter un "lent" ou l'animer.

HTML:

<script type="text/javascript" > 
$(document).ready(function(){ 
    $('.leftTab').hover(function(){ 
     $(".leftKanji").css('display', 'block'); 
    }, 
    function(){ 
     $(".leftKanji").css('display', 'none'); 
    }); 
}); 
</script> 
<div class="mainTabSection"> 
    <a href="#" class="leftTab"> 
    <div class="mainTab"><img src="../" /></div> 
    <div class="leftKanji"><img src="../" /></div> 
    </a> 
</div> 

<div class="mainTabSection"> 
    <a href="#" class="leftTab"> 
    <div class="mainTab"><img src="../" /></div> 
    <div class="leftKanji"><img src="../" /></div> 
    </a> 
</div> 

Answer 1

Quand vous dites $ ('leftKanji'), vous faites référence à tous les éléments de cette classe. Le code ci-dessous obtiendra l'élément qui est un enfant de l'élément .leftTab. Vous pouvez changer .children() pour être l'un des sélecteurs de déplacement dans l'API jQuery, mais j'ai utilisé celui-ci comme exemple. L'important est d'utiliser $ (this), car il correspond à l'élément qui a été plané.

$(document).ready(function(){ 
    $('.leftTab').hover(function(){ 
     $(this).children(.leftKanji').css('display', 'block'); 
    }, 
    function(){ 
     $(this).children(.leftKanji').css('display', 'none'); 
    }); 
}); 

Vous pourriez probablement aussi faire quelque chose comme ce qui suit:

$('.leftKanji', $(this)).css('display', 'block')

ou

$('.leftKanji', this).css('display', 'block')

Bien que je ne me souviens pas la syntaxe exacte à ce moment.

http://api.jquery.com/category/traversing/

Answer 2

$(document).ready(function(){ 

    $(".leftKanji").css('display', 'none'); 

    $('.leftTab').hover(function(){ 
     $(".leftKanji").fadeIn('slow'); 
    },function(){ 
     $(".leftKanji").fadeOut('slow'); 
    }); 

}); 

Answer 3

ou

$(document).ready(function() { 

      $(".leftKanji").hide(); 
      $('.leftTab').hover(function(){ 
       $(".leftKanji").hide(); 
       $(this).children().next(".leftKanji").show(); 
      }); 
     });