twitter-bootstrap Bootstrap TabPanel 选项卡 - 禁用页面滚动到元素的 ID
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25015051/
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 TabPanel Tab - Disable Page Scrolling To Element's ID
提问by Toms Bugna
My TabPanel Tab's title consists of two things:
我的 TabPanel Tab 的标题包括两件事：
- checkbox
- title of the tab
- 复选框
- 选项卡的标题
To show tabs, I use jQuery code:
要显示选项卡，我使用 jQuery 代码：
$('#myTab a').click(function (e) {
$(this).tab('show');
});
With this kind of a code the page scrolls to each div every time I click on a tab. If I add jQuery code line e.preventDefault();before $(this).tab('show');line which disables the scrolling, then comes the second problem - checkboxes doesn't check/uncheck any more.
使用这种代码，每次我单击选项卡时，页面都会滚动到每个 div。如果我e.preventDefault();在$(this).tab('show');禁用滚动的行之前添加 jQuery 代码行，则会出现第二个问题 - 复选框不再选中/取消选中。
Any ideas, how to escape from both problems?
任何想法，如何摆脱这两个问题？
Example with scrolling problem: http://jsfiddle.net/K9LpL/717/
滚动问题示例：http: //jsfiddle.net/K9LpL/717/
Example with checkbox checking/unchecking problem: http://jsfiddle.net/K9LpL/718/
复选框检查/取消检查问题示例：http: //jsfiddle.net/K9LpL/718/
采纳答案by Tricky12
EDIT - Roman's answer below is a better solution than this one.
编辑 - 下面罗曼的回答是比这个更好的解决方案。
Using preventDefault()you can add code to manually toggle the checkboxes.
使用preventDefault()您可以添加代码来手动切换复选框。
var checked = $(this).find('input').prop('checked');
$(this).find('input').prop('checked', !checked);
Edit:
编辑：
I decided to approach this the other way. Do not use preventDefault()and instead, fix the scrolling issue. I was able to do this with $(window).scrollTop(0)and a very, very small delay/timeout.
我决定以另一种方式解决这个问题。不要使用preventDefault()，而是修复滚动问题。我能够用$(window).scrollTop(0)非常非常小的延迟/超时来做到这一点。
$('#myTab a').click(function (e) {
var scrollHeight = $(document).scrollTop();
$(this).tab('show');
setTimeout(function() {
$(window).scrollTop(scrollHeight );
}, 5);
});
回答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');
});
edit: fixed class selector as per comment.
编辑：根据评论固定类选择器。
回答by Taha Paksu
My method (used on nav-pillsbut you can replace pillto tabeasily, modified @Tricky12's answer a little because I didn't like setTimeoutwhen using a faded tab switch:
我的方法（使用过，nav-pills但您可以轻松替换pill为tab，稍微修改了@Tricky12 的答案，因为我不喜欢setTimeout使用褪色的选项卡开关：
$(document).ready(function(){
// buffer the last scroll position
var lastScrollPosition = $(window).scrollTop();
$('a[data-toggle="pill"]').on('shown.bs.tab', function (e) {
location.replace($(e.target).attr("href"));
// revert back to last scroll position
$(window).scrollTop(lastScrollPosition);
});
// switch to the currently selected tab when loading the page
$('.nav-pills a[href="' + window.location.hash + '"]').tab("show");
$('a[data-toggle="pill"]').on("click", function(e){
// buffer the scroll position again
lastScrollPosition = $(window).scrollTop();
// show the tab
$(this).tab('show');
// prevent default actions
return false;
});
});
Note: coded on Bootstrap 4.3 but I suppose it'll work on older versions too.
注意：在 Bootstrap 4.3 上编码，但我想它也适用于旧版本。
