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具有#，因此每次点击都会在网址中添加#，从而替换您浏览器的网址。因此，从锚标签中将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事件

1 个答案: