Bootstrap 悬停选项卡显示多个选项卡

Question

我已经使用了这个问题的答案“如何在悬停而不是点击时制作 twitter bootstrap 菜单下拉菜单”

问题是当鼠标在所有选项卡上快速移动时，多个 .tab-pane 元素会显示在 tab-content 元素中。

演示

HTML

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1">Home</a></li>
  <li><a href="#tab2">Profile</a></li>
  <li><a href="#tab3">Messages</a></li>
  <li><a href="#tab4">Account</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade active" id="tab1">
      TAB1 CONTENT
  </div>
  <div class="tab-pane fade active" id="tab2">
      TAB2 OTHER CONTENT
  </div>
  <div class="tab-pane fade active" id="tab3">
      TAB3 MORE CONTENT
  </div>
  <div class="tab-pane fade active" id="tab4">
      TAB4 SO MUCH CONTENT
  </div>  
</div>

JS

$('.nav-tabs > li').mouseover( function(){
    $(this).find('a').tab('show');
});
$('.nav-tabs > li').mouseout( function(){
  $(this).find('a').tab('hide');
});

在选项卡上快速来回移动 mouseX，有时您会同时看到两者：

TAB1 内容

TAB2 其他内容

在我的实际版本中，您不必快速移动即可出现问题。

Answer 1

这是因为fade引导程序中的类是一个动画。如果你移动得足够快，第一个在第二个开始之前还没有完成。更改 HTML：

<div class="tab-content">
  <div class="tab-pane active" id="tab1">
      TAB1 CONTENT
  </div>
  <div class="tab-pane" id="tab2">
      TAB2 OTHER CONTENT
  </div>
  <div class="tab-pane" id="tab3">
      TAB3 MORE CONTENT
  </div>
  <div class="tab-pane" id="tab4">
      TAB4 SO MUCH CONTENT
  </div>  
</div>

更新了你的小提琴：http : //jsfiddle.net/VPn52/1/