单击时引导标签滚动效果到内容 [英] Bootstrap tabs scroll effect to content when clicked

问题描述

我正在使用这样的 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.

我应该改变什么?

更新:

JSFIDDLE

推荐答案

我已经更新了你的小提琴，现在它工作正常

I have updated your fiddle, Now its working fine

工作演示

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

});

这篇关于单击时引导标签滚动效果到内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！