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功能。在这种情况下，我将seminare.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>

到现在为止，我最终都没有关注打开的标签页面顶部。所以我必须向下滚动到选项卡。如何设置跳转到选项卡区域以及正常锚点功能？

谢谢你们。

Answer 1

我使用jQuery轻松完成这项工作：

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

但要确保它可见。

Answer 2

问题解决了。因为隐藏的特定div不起作用。

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

添加课程'有效'并且有效

Bootstrap选项卡 - 在不同的内侧打开特殊选项卡，然后通过单击跳转到锚点

2 个答案: