如何避免专注于slickGoTo事件

Question

我正在使用光滑的滑块以对轮播执行一些操作。

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

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

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。 因此，从锚标记中将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);
});