我使用了这个问题的答案'How to make twitter bootstrap menu dropdown on hover rather than click‘。
问题是,当鼠标快速移动到所有选项卡上时,tab-content元素中会显示多个.tab-窗格元素。
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其他内容
在我的实际版本中,您不必移动得那么快,问题就会发生。
发布于 2014-04-04 09:08:35
这是因为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/
发布于 2016-02-18 16:27:08
也许你可以试试我的解决方案。我在我的代码中尝试了这个解决方案,它起作用了。对于悬停解决方案,我从这里开始使用解决方案: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).tab(‘jQuery’) ..)
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');
});
发布于 2015-06-16 15:27:11
你还可以做的是,如果你想保持淡入效果,可以有一个布尔值来跟踪一个标签当前是否在淡入,以防止其他标签被触发,这应该是可行的:
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');
});
https://stackoverflow.com/questions/22851685
复制相似问题