我怎样才能避免关注 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>

这些选项卡独立于 slick 功能。

Answer 1

因为 href 有 # 所以每次点击都会在 url 中添加 # 替换浏览器的 url。因此，将锚标记中的 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);
});

我怎样才能避免关注 slickGoTo 事件

How can I avoid focusing on slickGoTo event

javascript

jquery

slick.js