Javascript 引导选项卡Panel Tab-禁用页面滚动到元素'；身份证

我的TabPanel选项卡的标题由两部分组成：

复选框

标签的标题

要显示选项卡，我使用jQuery代码：

$（“#myTab a”）。单击（函数（e）{
$（this.tab（'show'）；
});

使用这种代码，每次单击选项卡时，页面都会滚动到每个div。如果我添加jQuery代码行

e.preventDefault（）在
$（this.tab（'show'）之前行禁用滚动，然后出现第二个问题-复选框不再选中/取消选中

有什么想法，如何摆脱这两个问题

滚动问题示例：

复选框选中/取消选中问题示例：
编辑-罗曼下面的答案比这个更好。

使用
preventDefault（）
可以添加代码以手动切换复选框

var checked = $(this).find('input').prop('checked');
$(this).find('input').prop('checked', !checked);


编辑：

我决定用另一种方式来处理这个问题。不要使用
preventDefault（）
，而是修复滚动问题。我可以用
$（window.scrollTop（0）
和一个非常非常小的延迟/超时来实现这一点

$('#myTab a').click(function (e) {
    var scrollHeight = $(document).scrollTop();

    $(this).tab('show');

    setTimeout(function() {
        $(window).scrollTop(scrollHeight );
    }, 5);
});

我通过添加e.stopImmediatePropagation（）解决了这个问题；到事件处理程序：

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

编辑：根据注释修复了类选择器。
您可以使用
我的方法（用于
导航药丸
但您可以轻松地将
药丸
替换为
选项卡
，对@Tricky12的答案进行了一点修改，因为我不喜欢使用褪色的选项卡开关时设置超时
：

$(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;
    });
});

注意：在Bootstrap 4.3上编码，但我想它在旧版本上也能工作。
什么是滚动问题。我找不到它。你能解释一下点击任何选项卡的更多乐趣吗。正如你所看到的，每次点击任何选项卡，页面都会向下滚动。我不想让该页面滚动到锚ID，因为这很烦人每次我点击一个标签，页面都会滚动到准确的id。有什么帮助吗？没有人能解决这个问题吗？点击这个。我也更新了你的html。如果你觉得可行，那么说你的复选框有问题。这可能是解决方案的一半。我希望复选框在点击复选框时也能工作。我想要当单击仅在复选框上时，不要选中复选框和取消选中复选框。我不希望在单击选项卡的标题名称时选中复选框和取消选中。@TomsBugna我会看看是否可以找到解决方法，但问题是，当您单击复选框时，锚定标记的事件正在触发。这使单击事件变得困难复选框本身。是的，我也注意到了这一点。我也试着用它来解决问题，但我失败了。但我觉得这一点的解决方案很接近，但仍需要努力尝试其他解决方案。如果你能找到解决方案，我将不胜感激。@TomsBugna我目前没有任何运气。它没有“看起来锚定标记中的复选框不起作用。我们可能必须切换您的HTML以获得您想要的内容。如果我能找到一个好的解决方案，我会再给您回复。您忘了。在selecto.nav选项卡中，Joel！真不敢相信我以前没有注意到这个输入错误。这应该是公认的答案。甚至连一行代码都没有！@IanBri！”ndley是的，这绝对是一个比我更好的解决方案。我想，因为这是一年多以后OP再也没有回来打扰过它了。令人惊讶的答案，希望我有机会竖起大拇指！！即使是2020年的Bootstrap 4，这仍然是这个问题的最佳答案！