javascript - Jquery 帮助左侧选项卡菜单

Question

这确实不应该这么复杂，但无法弄清楚。

沿着正文内容部分的左侧垂直有几个选项卡。

页面加载时，“leftKanji”css = display:none。想要当鼠标进入链接或“leftTab”类时，则“leftKanji”css = disply:block

目前，所有“leftKanji”都显示或隐藏，而不是鼠标悬停的那个。如果我可以添加“慢”或动画，那就太好了。

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

当您说 $('.leftKanji') 时，您指的是具有该类的所有元素。下面的代码将获取 .leftTab 元素的子元素。您可以将 .children() 更改为 jQuery api 中的任一遍历选择器，但我使用了该选择器作为示例。但重要的是使用 $(this)，因为它与悬停的元素相对应。

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

您可能还可以执行以下操作:

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

或

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

虽然我现在不记得确切的语法。

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