Question

我已经使用了这个问题的答案＆＃39; How to make twitter bootstrap menu dropdown on hover rather than click＆＃39;

问题是当鼠标快速移动到所有选项卡上时，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>

JS

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

快速地来回移动鼠标X，有时你会同时看到两个：

TAB1内容

TAB2其他内容

在我的实际版本中，您不必快速移动以解决问题。

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>

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

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

添加此行（第3行或之后...... e.preventDefault（）; ..）

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

和这一行（在...后jQuery（this）.tab（＆＃39; show＆＃39;）..）

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

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

Answer 4

为我找到了解决方法。淡入淡出动画的默认速度为0.15s。您需要将其重用到0.1s。现在，另一张照片没有时间出现在第一次消失之前。

Bootstrap hover选项卡显示多个选项卡

4 个答案: