Bootstrap选项卡 - 防止滚动到顶部

Question

这是我的标签的布局.T1和T2是正常的标签部分.T3内部有级联标签.请找到以下标记:

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#T1">Tab1</a></li>
        <li class=""><a href="#T2">Tab2</a></li>
        <li class=""><a href="#T3">Tab3</a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane" id="T2">
        Tab 2 Content...
    </div>
    <div class="tab-pane" id="T3">
            <div class="tabbable tabs-left">
                    <ul class="nav nav-tabs">
                             <li class="active"><a href="#Chart" data-toggle="tab">Chart</a></li>
                                 <li><a href="#Report" data-toggle="tab">Reports</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active">
                                Chart Content...
                        </div>
                        <div class="tab-pane" style="float: right;width: 96%;">
                                Report Content...
                        </div>
                    </div>
            </div>
    </div>
</div>

问题是在点击T3时页面向上滚动.同样在JS方面我正在调用preventDefault方法,如下所示:

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
}

我认为T3内的级联选项卡导致问题.我们如何禁用这些选项卡/链接的默认行为？对此有任何想法......

Answer 1

您可以使用: <a data-target="#home"> 而不是<a href="#home">

请看这里的例子:http://jsfiddle.net/RPSmedia/K9LpL/1154/

Answer 2

它在小于 3 的 Bootstrap 版本中工作正常。在 Bootstrap 3 中，您必须包含 tab-left 和 tab-right 的 CSS 样式

我创建了一个小提琴检查

    <div class="tabbable tabs-left" style="margin-top:10px;">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>
            <li><a href="#lB" data-toggle="tab">Section 2</a></li>
            <li><a href="#lC" data-toggle="tab">Section 3</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="lA">
                <p>I'm in Section A.</p>
            </div>
            <div class="tab-pane" id="lB">
                <p>Howdy, I'm in Section B.</p>
            </div>
            <div class="tab-pane" id="lC">
                <p>What up girl, this is Section C.</p>
            </div>
        </div>
    </div> 

这是小提琴http://jsfiddle.net/9CDMH/