Question

我正在使用el.tab（＆＃39; show＆＃39;）来显示引导程序3选项卡，它可以工作但是当选项卡的内容很大时，由于页面滚动而不再显示选项卡（这不是与单击选项卡本身相同的行为）。知道如何解决这个问题吗？感谢。

更新：这是一个示例代码。默认情况下显示选项卡一，然后单击＆＃34;转到选项卡2＆＃34;锚移动到包含大页面的选项卡2。问题是点击后顶部标签不再可见，因为显示了标签2中嵌入页面的底部。

<div class="container-fluid">
<ul class="nav nav-tabs">
    <li><a href="#tab_one" data-toggle="tab">Tab One</a></li>
    <li><a href="#tab_two" data-toggle="tab">Tab Two</a></li>
</ul>
<div class="tab-content">
<div id="tab_one" class="tab-pane fade in">
<ul>
    <li><a href="#tab_two" onClick="jQuery('.nav-tabs a[href=#tab_two]').tab('show')">Go to Tab 2</a> </li>
</ul>
</div>
<div id="tab_two" class="tab-pane fade in">
<p>content of tab 2, long page </p>
</div>
</div>

Answer 1

找到解决问题的方法，但是，它并不漂亮：

jQuery('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    setTimeout( function (e) {
       window.scrollTo(0,0);
     }, 1);
});

长页面上的Bootstrap 3选项卡（'show'）隐藏了选项卡

1 个答案: