javascript - 如何避免关注 slickGoTo 事件

Question

我正在使用slick slider为了使用轮播执行一些操作。

我录制了一个video我想避免的行为。当您单击选项卡时，它会执行奇怪的焦点操作吗？我所需要的是，如果您单击任何选项卡，焦点不会移动到任何地方，因此屏幕不会执行向下滚动操作。

我正在使用此功能转到我需要的幻灯片，这导致了我不需要的聚焦故障:

var handleTabsClick = function() {
    $('.product-details--P3 .product-tabs__link').on('click', function() {
        var index = $(this).data('index');
        $('.slick').slick('slickGoTo', index, false);
    });
};

这是这些选项卡的 html

<ul class="product-tabs js-tabs">
    <li class="js-tab">
        <a class="product-tabs__link" href="#" data-index="0">
            Advantage <span>SafaBalance</span> </a>
    </li>
    <li class="js-tab">
        <a class="product-tabs__link" href="#" data-index="1">
            Advantage <span>Plus</span> </a>
    </li>
    <li class="js-tab">
        <a class="product-tabs__link" href="#" data-index="2">
            Advantage <span>Relationships</span> </a>
    </li>
</ul>

这些选项卡与流畅的功能是分开的。

Answer 1

因为href中有#，所以每次点击都会在url中添加#，替换浏览器的url。因此，将 anchor 标记中的 href="#" 替换为 href="javascript:void(0)"，例如

<ul class="product-tabs js-tabs">
    <li class="js-tab">
        <a class="product-tabs__link" href="javascript:void(0)" data-index="0">
            Advantage <span>SafaBalance</span> </a>
    </li>
    <li class="js-tab">
        <a class="product-tabs__link" href="javascript:void(0)" data-index="1">
            Advantage <span>Plus</span> </a>
    </li>
    <li class="js-tab">
        <a class="product-tabs__link" href="javascript:void(0)" data-index="2">
            Advantage <span>Relationships</span> </a>
    </li>
</ul>

或者，您可以使用 event.preventDefault()在您的点击事件中，例如

$('.product-details--P3 .product-tabs__link').on('click', function(e){
    e.preventDefault();
    var index = $(this).data('index');
    $('.slick').slick('slickGoTo', index, false);
});