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');
});

快速地在选项卡之间来回移动鼠标，有时您会同时看到两个选项卡的内容：

选项卡1的内容

选项卡2的其他内容

在我的实际版本中，您不必移动得那么快，问题也会出现。

- user1425011

Answer 1

这是因为Bootstrap中的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>

Updated your fiddle: http://jsfiddle.net/VPn52/1/

- Jorg

---

谢谢您的快速回复！我能保留动画吗？也许可以检查其他活动选项卡并将它们隐藏起来？ - user1425011

不确定，Bootstrap的fade是CSS过渡效果：opacity: 0;-webkit-transition: opacity .15s linear;transition: opacity .15s linear;，我不知道如何以可控的方式中断其中一个。也许如果您使用jQuery编写自己的淡入淡出动画，可以使用其排队或链接机制。 - Jorg

Answer 2

也许你可以尝试我的解决方案。 我在我的代码中尝试了这个解决方案，它有效。 对于悬停解决方案，我参考了这里的解决方案： http://tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills/

jQuery('.nav-tabs a').hover(function(e){
    e.preventDefault();
    jQuery(this).tab('show');
});

在它的后面添加这行代码（第三行或之后的位置.. e.preventDefault(); ..）

jQuery('.tab-pane').removeClass('active');
tabContentSelector = jQuery(this).attr('href');

并且这行代码（在.. jQuery(this).tab('show') ..之后）

jQuery(tabContentSelector).addClass('active');

于是代码变成了这样：

jQuery('.nav-tabs a').hover(function(e){
    e.preventDefault();
    jQuery('.tab-pane').removeClass('active');
    tabContentSelector = jQuery(this).attr('href');
    jQuery(this).tab('show');
    jQuery(tabContentSelector).addClass('active');
});

- Willi

Answer 3

对我来说找到了解决方案。 淡入动画的默认速度为0.15秒。您需要将其减少到0.1秒。现在另一张图片在第一张消失之前没有时间出现。

- Spawnet

Answer 4

如果你想保留淡入效果，你还可以这样做：设置一个布尔值来跟踪当前是否有选项卡正在淡入，以防止其他选项卡被触发，代码如下：

var tabFadingIn = false;
$('.nav-tabs > li').mouseover( function(){
  var $tab = $(this).find('a');
  if (!tabFadingIn) {
    tabFadingIn = true;
    $tab.one('shown.bs.tab', function() {
      tabFadingIn = false;
    });
    $tab.tab('show');
  }
});
$('.nav-tabs > li').mouseout( function(){
  $(this).find('a').tab('hide');
});

- Anton Abilov