Question

我在移动视图中使用带有滚动效果的bootstrap内容选项卡。

在桌面视图中，这是正常的标签结构，但是当在较小的屏幕上查看时，单击标签页应该滚动到相应的内容面板。

在我的演示中，您可以看到滚动在第二次点击时起作用，但在第一次点击时不起作用。知道我错过了什么吗？

首次点击时需要获得滚动效果。

$('.tabs-right>li a').on('click', function (e) {
        var href = $(this).attr('href');
        $('html, body').animate({
            scrollTop: $(href).offset().top
        }, 'slow');
        e.preventDefault();
    });

Updated DEMO

Answer 1

您正在处理相同的a元素上的点击事件，引导程序首先使用它来触发更改标签，这似乎会干扰此处。

使用events the tabs plugin provides来触发滚动动画：

$('.tabs-right>li a').on('shown.bs.tab', function (e) {
        var href = $(this).attr('href');
        $('html, body').animate({
            scrollTop: $(href).offset().top
        }, 'slow');
})

https://jsfiddle.net/b3nhjvot/220/

Answer 2

您的代码没有问题，但使用最新版本的jQuery（3.1.1）然后它完美地工作:)玩得开心

JS Fiddle: https://jsfiddle.net/arifkarim/b3nhjvot/209/

选项卡内容的引导滚动效果

2 个答案: