Bootstrap Tabs - 在不同的内侧打开粒子选项卡并通过单击跳转到锚点答案

【问题标题】：Bootstrap Tabs - Open particuler tab on a different internal side and jump to anchor by clickBootstrap Tabs - 在不同的内侧打开粒子选项卡并通过单击跳转到锚点
【发布时间】：2017-11-07 15:29:41
【问题描述】：

大家好，关于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 包含函数。在这种情况下，我将 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>

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

谢谢大家。

【问题讨论】：

标签： javascript php jquery html twitter-bootstrap

【解决方案1】：

我会使用 jQuery 轻松做到这一点：

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

但要确保它可见。

【讨论】：

该功能应该适用于某些锚点，不仅适用于 wppp。所以我想我必须用 url.split('#')[1] 替换#wppp，比如 $(document).scrollTop( $("#" + url.split('#')[1]).offset( ）。最佳）;我必须在哪里放置此功能，可见是什么意思？
文档中的任何地方，我所说的可见是指您自己可以看到它。

【解决方案2】：

问题解决了。因为particuler div被隐藏了所以不能用。

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

添加类 'active' 就可以了

【讨论】：