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

You can use: <a data-target="#home"> instead of <a href="#home">

See here for an example: 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/

Answer 3

我通过添加e.stopImmediatePropagation（）来解决这个问题。到事件处理程序：

$('.nav-tabs li a').click(function(e){
  e.preventDefault();
  e.stopImmediatePropagation();
  $(this).tab('show');
});

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

3 个答案: