1

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

我的导航列表固定在页面上，单击每个链接会打开其选项卡内的信息。

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

<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-tab.js 的 bootstrap.min.js。选项卡工作正常并激活，而不是移动到选项卡内容的顶部。

4

1 回答 1

0

我这样做了：

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

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

于 2013-09-13T15:28:59.823 回答