显示多个选项卡的引导悬停选项卡答案

【问题标题】：Bootstrap hover tabs showing multiple tabs显示多个选项卡的引导悬停选项卡
【发布时间】：2014-05-16 02:40:01
【问题描述】：

我使用了这个问题的答案'How to make twitter bootstrap menu dropdown on hover rather than click'

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

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>

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

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

TAB1 内容

TAB2 其他内容

在我的实际版本中，您不必为了问题发生而快速移动。

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案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/

【讨论】：

感谢您的快速回复！有什么办法可以保留动画吗？也许检查任何其他活动标签并隐藏它们？
不确定，bootstrap 的 fade 是 CSS 转换：opacity: 0;-webkit-transition: opacity .15s linear;transition: opacity .15s linear;，我真的不知道该怎么做才能以受控的方式打断其中一个。也许如果您使用 jquery 编写自己的淡入淡出动画，您可以使用它的排队或链接机制。

【解决方案2】：

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

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

添加这一行（第 3 行或之后 .. 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');
});

【讨论】：

【解决方案3】：

如果你想保持淡入淡出效果，你还可以做一个布尔值来跟踪标签当前是否淡入，以防止其他人被触发，这应该可以：

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

【讨论】：

【解决方案4】：

为我找到了解决方案。淡入淡出动画的默认速度为 0.15 秒。您需要将其减少到 0.1 秒。现在另一张图片来不及出现就先消失了。

【讨论】：