Question

我正在使用bootstrap选项卡，其附加功能是将标签名称粘贴在location.hash中，这样我就可以让用户直接链接到选项卡，它会在页面加载时将其带到那里，因此将哈希添加到URL更改标签时看起来像：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    window.location.hash = $(e.target).attr("href").replace("#", "");
});

我在这里看到：https://stackoverflow.com/a/14560718/254257如何在不滚动的情况下更改location.hash并且能够在我的标签链接上实现这一点，如下所示：

$(document).on("click", "a[href^='#'][data-toggle='tab']", function (event) {
    event.preventDefault();
    console.log("tab toggled click");
    history.pushState({}, "", this.href);
});

很酷，现在当我点击我的链接时：

<li role="presentation" class="active"><a data-toggle="tab" href="#overview" role="tab">Overview</a></li>

没有滚动跳转，我的哈希#overview被添加。但是，我还在选项卡链接列表旁边有通用的下一个和上一个按钮。哪个标记就像：

    <a class="header-button wizard-previous-button" href="#" data-target-wizard-id="wizard1" title="Previous">
        <span class="header-button-text">Prev</span>
    </a>

    <a class="header-button wizard-next-button" href="#" data-target-wizard-id="wizard1"  title="Next">
        <span class="header-button-text">Next</span>
    </a>

也可以在标签之间进行切换。例如，单击上一个选项卡按钮，将运行以下功能：

function moveToPreviousTab(targetedWizard) {
    var $previousPaneLinkLi = $("#" + targetedWizard + " > .active").prev("li");
    var $previousPaneLinkA = $previousPaneLinkLi.find("a");
    $previousPaneLinkA.trigger('click');
}

当我点击它时。我在我的控制台中看到一个额外的＆＃34;标签切换点击＆＃34;如代码所示，该代码应该阻止滚动更改。但滚动跳跃仍然发生。我知道阻止滚动跳转的代码，因为没有它，当我直接单击选项卡链接时，滚动会更改。所以看起来唯一的区别是用户直接点击UI并且它正在工作，而另一个是JS触发点击元素作为jquery对象。

如何让它工作并停止滚动跳转？

尝试阻止滚动更改#hash以获取引导选项卡，在调用.trigger时仍会滚动（＆＃34;单击＆＃34;）

0 个答案: