Question

我有一个使用Bootstrap 2.3.2的标签系统，基于这里的教程：http://webdesigntutsplus.s3.amazonaws.com/tuts/319_bootstrap_pills_tabs/Tabs-Pills-BEGIN/tabs-pills.html

我的导航列表已在页面上修复，单击每个链接会打开其选项卡中的信息。

我的问题是每个标签中的内容都很长，需要滚动。如果在列表的中间，您单击其中一个其他导航链接，它将更改为新选项卡，但仍然会离开页面的中间位置。行为应该是前往活动选项卡的开头。即。将页面移动到新活动选项卡的顶部。

<div class="tab-pane" id="tabs-stacked">
<div class="tabbable tabs-left ">
    <ul class="nav nav-pills nav-stacked span2 sidebar-nav-fixed" id="tabs" data-tabs="tabs">
        <li class="active"><a href="#tabs2-pane1" data-toggle="tab">Tab 1</a></li>
        <li><a href="#tabs2-pane2" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tabs2-pane3" data-toggle="tab">Tab3</a></li>
    </ul>
    <div class="tab-content span10 offset2 middle-bar-information">
        <div id="tabs2-pane1" class="tab-pane active">
            <p class="header">TEST TEST TEST
            </p>
            <br><br>
        </div><!-- End tabs2-pane1 -->
        <div id="tabs2-pane2" class="tab-pane">
            <p class="header">Okay. Now... Hardened Kevlar plates over titanium-dipped, tri-weave fibers for flexibility. </p>
        </div><!-- End tabs2-pane2 -->
    </div><!-- End tab-content -->
</div><!-- End tabbable -->

您可以在此处进行测试：http://bootply.com/80587

我正在使用bootstrap 2.3.2，正在加载bootstrap.min.js，其中包括bootstrap-tab.js。标签工作正常并激活，而不是移动到标签内容的顶部。

Answer 1

我这样做了：

$('#tabs-stacked li').click( function(){
var tabs_offset = $('#tabs-stacked').offset();
scrollTo(tabs_offset.left, tabs_offset.top);
});

它有效 - 不漂亮 - 但它有效。

Bootstrap活动选项卡不会移动到屏幕顶部

1 个答案: