javascript - 引导程序悬停选项卡显示多个选项卡(Bootstrap hover tabs showing multiple tabs)

Question

I've used the answer from this question ' How to make twitter bootstrap menu dropdown on hover rather than click '(我使用了以下问题的答案：“ 如何在悬停时使twitter引导菜单下拉列表而不是单击 “)

The problem is that when the mouse is moved quickly over all tabs, multiple .tab-pane elements are displayed in the tab-content element.(问题在于，当鼠标快速移至所有选项卡上时，选项卡内容元素中会显示多个.tab-pane元素。)

Demo(演示版)

HTML(的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(JS)

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

Move the mouseX across the tabs rapidly back and forth and sometimes you will see both at once:(在选项卡上来回快速移动mouseX，有时您会一次看到两者：)

TAB1 CONTENT(表1内容)

TAB2 OTHER CONTENT(TAB2其他内容)

In my actual version you don't have to move as fast for the problem to occur.(在我的实际版本中，您不必为出现问题而以如此快的速度移动。)

  ask by user1425011 translate from so

Answer 1

It's the because the fade class in bootstrap is an animation.(这是因为引导程序中的fade类是动画。)

If you move fast enought, the first one hasn't finished before the second one starts.(如果您移动得足够快，则第一个尚未完成，而第二个尚未开始。) Change the HTML:(更改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>

Updated your fiddle: http://jsfiddle.net/VPn52/1/(更新了您的提琴： http : //jsfiddle.net/VPn52/1/)