单击时,Bootstrap选项卡会将效果滚动到内容 [英] Bootstrap tabs scroll effect to content when clicked
本文介绍了单击时,Bootstrap选项卡会将效果滚动到内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用这样的Bootstrap 3标签:
I am using Bootstrap 3 Tabs like this:
<ul class="nav nav-pills nav-justified">
<li><a href="#tab-1t" data-toggle="tab"></a></li>
<li class="active"><a href="#tab-2" data-toggle="tab"></a></li>
<li><a href="#tab-3" data-toggle="tab"></a></li>
</ul>
由于标签内容变得很长,我想添加一个以标签内容为中心的滚动效果。
Because the tab content gets quite long i want to add a scrolling effect that centers the tab content.
我正在将此片段用于网站上的其他滚动效果:
I am using this snippet for other scroll-effects on the site:
$('a.scroll').on('click', function(e){
var href = $(this).attr('href');
$('html, body').animate({
scrollTop:$(href).offset().top
},'slow');
e.preventDefault();
});
当我将滚动类添加到标签链接时,我得到了所需的效果,但仅限于已经活动标签。使用非活动标签需要两次点击。
When i add the "scroll" class to the tab links i get the desired effect but only on already active tabs. With inactive tabs it requires two clicks.
我应该更改什么?
更新:
推荐答案
我已经更新了你的小提琴,现在工作正常
I have updated your fiddle, Now its working fine
Working Demo
jQuery
jQuery(document).ready(function ($) {
$('.nav a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
$('a.scroll').on('click', function (e) {
var href = $(this).attr('href');
$('html, body').animate({
scrollTop: $(href).offset().top
}, 'slow');
e.preventDefault();
});
});
这篇关于单击时,Bootstrap选项卡会将效果滚动到内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文