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内部的层叠选项卡导致了问题。我们如何禁用这些选项卡/链接的默认行为？对此有何想法...

- DiluMaverick

Answer 1

您可以使用：<a data-target="#home"> 代替 <a href="#home"> 这里有一个示例： http://jsfiddle.net/RPSmedia/K9LpL/1154/

- Roman

---

在Bootstrap 5中，属性是data-bs-target。 - undefined

Answer 2

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

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

- Allan Nienhuis

---

这是我要寻找的答案。 - littlealien

Answer 3

在 Bootstrap 3 版本以下，它可以正常工作。而在 Bootstrap 3 中，您需要包含 tab-left 和 tab-right 的 CSS 样式。

我已经创建了一个 fiddle，请查看。

    <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> 

这是 fiddle http://jsfiddle.net/9CDMh/

- Karthikeyan

---

选项卡都可以正常工作。问题在于当单击选项卡（具有带有tab-left类的选项卡，在我的示例中为T3）时，屏幕会向上滚动。此外，我正在使用Bootstrap v2.0.4。 - DiluMaverick

你尝试使用最新的Bootstrap版本了吗？ - Karthikeyan

尝试使用最新版本的Bootstrap，但整个网站都崩溃了。 - DiluMaverick

请发送您的 jsfiddle 链接。 - Karthikeyan