twitter-bootstrap Bootstrap 标签 - 防止滚动到顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21571599/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Tabs - Prevent scrolling to top
提问by DiluMaverick
This is the layout of my tabs. T1 and T2 are normal tab section. There is cascading tabs inside T3. Please find the markup below:
这是我的选项卡的布局。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>
The issue is while clicking on T3 the page is scrolling up. Also in the JS side i'm calling the preventDefault method as shown below:
问题是在单击 T3 时页面正在向上滚动。同样在 JS 端，我正在调用 preventDefault 方法，如下所示：
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
}
I think cascading tab inside T3 is causing the problem. How can we disable the default behavior of those tabs/links? Any thoughts on this...
我认为 T3 内的级联选项卡导致了问题。我们如何禁用这些选项卡/链接的默认行为？关于这个的任何想法......
回答by Roman
You can use:
<a data-target="#home">instead of <a href="#home">
您可以使用：
<a data-target="#home">代替<a href="#home">
See here for an example: http://jsfiddle.net/RPSmedia/K9LpL/1154/
回答by Allan Nienhuis
I fixed this by adding e.stopImmediatePropagation(); to the event handler:
我通过添加 e.stopImmediatePropagation(); 解决了这个问题。到事件处理程序：
$('.nav-tabs li a').click(function(e){
e.preventDefault();
e.stopImmediatePropagation();
$(this).tab('show');
});
回答by Karthikeyan
It works Fine in Bootstrap versions less than 3. And in Bootstrap 3 you have to include CSS styles for tab-left and tab-right
它在小于 3 的 Bootstrap 版本中工作正常。在 Bootstrap 3 中，您必须为 tab-left 和 tab-right 包含 CSS 样式
i have created a fiddle check out
我创建了一个小提琴检查
<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>
here is fiddle http://jsfiddle.net/9CDMh/
