引导选项卡 - 防止滚动到顶部

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

我通过添加 e.stopImmediatePropagation(); 解决了这个问题。到事件处理程序：

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

Answer 3

它在小于 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/