Bootstrap TabPanel Tab - 禁用页面滚动到元素的 ID

Posted 2023-02-22

【中文标题】Bootstrap TabPanel Tab - 禁用页面滚动到元素的 ID

【英文标题】：Bootstrap TabPanel Tab - Disable Page Scrolling To Element's ID

【发布时间】：2014-09-20 19:26:08

【问题描述】：

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

复选框 标签的标题

为了显示标签，我使用 jQuery 代码：

$('#myTab a').click(function (e) 
  $(this).tab('show');
);

使用这种代码，每次单击选项卡时页面都会滚动到每个 div。如果我在禁用滚动的$(this).tab('show'); 行之前添加jQuery 代码行e.preventDefault();，那么就会出现第二个问题 - 复选框不再选中/取消选中。

任何想法，如何摆脱这两个问题？

滚动问题示例： http://jsfiddle.net/K9LpL/717/

复选框选中/取消选中问题的示例： http://jsfiddle.net/K9LpL/718/

【问题讨论】：

什么是滚动问题。我找不到它。你能解释一下吗

尝试点击任何标签。如您所见 - 每次单击任何选项卡时页面都会向下滚动。我不希望该页面滚动到锚点 ID，因为每次我单击选项卡时页面都会滚动到确切的 ID，这很烦人。

这方面有什么帮助吗？没人能解决吗？

看看这个。我也更新了你的 html。如果你觉得可行，那就说jsfiddle.net/Amit12x/K9LpL/720

你的复选框有问题。

【参考方案1】：

你可以使用 <a data-target="#home"> 而不是<a href="#home">

查看 jsfiddle 示例 here。

【讨论】：

这应该是公认的答案。连一行代码都没有！

@IanBrindley 是的，这绝对是比我更好的解决方案。我想自从一年多之后，OP 就再也没有回来打扰它了。

惊人的答案，希望我可以选择给予双拇指！

即使到 2020 年的 Bootstrap 4，这仍然是这个问题的最佳答案！

【参考方案2】：

我的方法（用于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;
    );
);

注意：在 Bootstrap 4.3 上编码，但我想它也适用于旧版本。

【参考方案3】：

编辑 - 下面罗曼的回答是比这个更好的解决方案。

使用preventDefault()，您可以添加代码来手动切换复选框。

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

Updated Fiddle

编辑：

我决定以另一种方式处理这个问题。不要使用preventDefault()，而是修复滚动问题。我能够通过$(window).scrollTop(0) 和非常非常小的延迟/超时来做到这一点。

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

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

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

Demo

【讨论】：

这可能是解决方案的一半。我希望仅在单击复选框时复选框也可以工作。

我希望复选框仅在单击复选框时选中和取消选中。当我单击选项卡的标题名称时，我不希望复选框选中和取消选中。

@TomsBugna 我会看看是否能找到解决方法，但问题是当您单击复选框时，锚标记的事件正在触发。这使得在复选框本身上获得点击事件变得困难。

是的，我也注意到了这个。我也尝试过解决它，但我失败了。但我觉得附近的某个地方是这个解决方案，但仍然需要争取并尝试其他一些解决方法。如果您能找到解决方案，我将不胜感激。

@TomsBugna 到目前为止我没有任何运气。看起来复选框不会在锚标记内工作。我们可能不得不切换您的 HTML 以获得您想要的工作。如果我能找到好的解决方案，我会尽快与您联系。

【参考方案4】：

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

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

编辑：根据评论固定类选择器。

【讨论】：

你忘了。在您选择的 .nav-tabs 中

谢谢，乔尔！不敢相信我以前没有注意到那个错字。