如何打开一个标签（tabpane）并滚动到它？

Question

我想点击链接并在当前页面中打开一个标签（评论）并滚动到它。我不想在网址中使用哈希.....

这是我点击链接的代码：

$('#openReview').on('click', function() {
    $('.nav-tabs a[href="#review"]').tab('show');
    document.getElementById("review").scrollIntoView();
});

问题是：我要点击两次!!!

首先：它使标签处于活动状态（第二个标签） - ＆gt;然后第二次点击滚动到它。

如何只需点击一下即可使其工作？ ：）

Answer 1

尝试使用此代码：

$('#openReview').on('click', function() {
    $('.nav-tabs a[href="#review"]').tab('show');
    $('html, body').animate({
        scrollTop: $(".tabs-widget").offset().top
    }, 2000);
});

如果您有更多带有tabs-widget类的元素，我建议您在此元素中添加一个ID，并在scrollTop中引用它。您可以在代码中更改滚动动画持续时间（我的示例是2秒）

修改

实际上，如果您在选项卡的包装部分使用id而不是使用#reviews，则代码将起作用。原因是tab需要几毫秒（＆＃34; show＆＃34;）执行，同时元素#reviews不在视图中，因此无法立即滚动到。

$('#openReview').on('click', function () {
    $('.nav-tabs a[href="#review"]').tab('show');
    document.getElementById("tabs_widget").scrollIntoView();
});

...
<!-- in you HTML -->
<section class="tabs-widget" id="tabs_widget">