javascript - Bootstrap 选项卡 - 在不同的内侧打开粒子选项卡并通过单击跳转到 anchor

Question

大家好，关于 this post我可以使用此脚本解决打开新页面和微粒选项卡的问题

window.onload = function(){  

var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show');
}

//Change hash for page-reload
$('.nav-tabs a[href=#' + url.split('#')[1] + ']').on('shown', function (e) {
    window.location.hash = e.target.hash;
}); 

}

链接看起来像这样

index.php?content=seminare#wppp

我正在使用 php include 函数。在本例中，我将 Semimere.php 包含到 index.php 中并打开 WPPP 选项卡。

选项卡的代码如下所示

<ul class="nav nav-tabs responsive-tabs">
    <li class="active">
       <a data-toggle="tab" href="#monitor"><i class="fa fa-circle" aria-hidden="true"></i>Monitor</a>
    </li>
    <li>
       <a data-toggle="tab" href="#wppp"><i class="fa fa-circle" aria-hidden="true"></i>WPPP</a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane fade in active" id="monitor">
        content 1
    </div><!-- tab-group -->

    <div class="tab-pane fade in" id="wppp">
        content 2
    </div><!-- tab-group -->
</div>

现在我最终位于页面顶部，而焦点不在打开的选项卡上。所以我必须向下滚动到选项卡。我怎样才能像正常的 anchor 功能一样跳转到选项卡区域？

谢谢大家。

Answer 1

我会使用 jQuery 轻松完成此操作:

$(function() {
  $(document).scrollTop( $("#wppp").offset().top );
});

但要确保其可见。