大家好,关于 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 功能一样跳转到选项卡区域?
谢谢大家。
最佳答案
我会使用 jQuery 轻松完成此操作:
$(function() {
$(document).scrollTop( $("#wppp").offset().top );
});
但要确保其可见。
关于javascript - Bootstrap 选项卡 - 在不同的内侧打开粒子选项卡并通过单击跳转到 anchor ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47161627/