[英]Bootstrap Tabs - Prevent scrolling to top
这是我的标签的布局。 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内的级联选项卡导致问题。 我们如何禁用这些选项卡/链接的默认行为? 对此有任何想法......
您可以使用: <a data-target="#home">
而不是<a href="#home">
请看这里的例子: http : //jsfiddle.net/RPSmedia/K9LpL/1154/
它在低于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>
我通过添加e.stopImmediatePropagation()修复了这个问题。 到事件处理程序:
$('.nav-tabs li a').click(function(e){
e.preventDefault();
e.stopImmediatePropagation();
$(this).tab('show');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.