显示多个选项卡的引导悬停选项卡
显示多个选项卡的引导悬停选项卡
提问于 2014-04-04 08:59:50
我使用了这个问题的答案'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其他内容
在我的实际版本中，您不必移动得那么快，问题就会发生。
回答 4
Stack Overflow用户
回答已采纳
发布于 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/
Stack Overflow用户
发布于 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');
});Stack Overflow用户
发布于 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');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22851685
复制相关文章
相似问题