Question

HTML

<ul class="nav-tabs">
  <li class="tab1"><a href="/" class="tab-link">Home</a></li>
  <li class="tab2 active"><a href="/" class="tab-link">...</a></li>
  <li class="tab3"><a href="/" class="tab-link">...</li>
  <li class="tab4"><a href="/" class="tab-link">...</li>
</ul>

<div id="tab-content">
  <div class="tab2"></div>
  <div class="tab3"> </div>
</div>

当鼠标在导航标签上移动时。 tab-content中的相应div内容显示。什么时候离开nav-tabs li。相应的div内容显示。

jquery的：

$( ".nav-tabs li" ).hover(
  function() {
     $( "#tab-content div" ).css( "display", "block" );
  }, function() {
     $( "#tab-content div" ).css( "display", "none" );
  }
);

代码有问题。当tab-content部分中的相应div显示时。我不能在它的孩子上移动鼠标链接。 2，当我骑在另一个nav-tabs li上时。其他李的内容也表明了。怎么纠正呢？谢谢。

Answer 1

尝试

$(".nav-tabs li").hover(function () {
    $("#tab-content div." + this.className.match(/(tab\d+)/)[0]).show();
}, function () {
    $("#tab-content div." + this.className.match(/(tab\d+)/)[0]).hide();
});

演示：Fiddle

鼠标移出时隐藏内容

1 个答案: