单击箭头上的bxslider，在选项卡外聚焦

编程问答 2022-08-15

问题描述

所以我发生了一些奇怪的事情，我想看看是什么原因导致的-但是我已经完美地实现了我的bxslider，无论出于何种原因，当我单击滑块中的下一个或上一个箭头时，它都会聚焦元素。

此滑块位于选项卡中，首先被隐藏，然后在该选项卡可见时，使用redrawSlides来显示滑块。

现在，如果我将滑块移到选项卡之外，它可以正常工作并移动到下一个选项卡。

有人经历过吗？请查看以下屏幕截图：

enter image description here

这是我用于呈现选项卡功能的JS的代码：

document.addEventListener('DOMContentLoaded',function() {
    if (window.location.hash && document.querySelector('.ui-tabs a[href="'+decodeURI(window.location.hash)+'"]')) {
        var tabs = document.querySelector('.ui-tabs a[href="'+decodeURI(window.location.hash)+'"]').closest('.tabs-container');
        tabs.querySelector('.ui-tabs a.active').removeAttribute('class');
        tabs.querySelector('section.tab.active').classList.remove('active');
        tabs.querySelector('.ui-tabs a[href="'+decodeURI(window.location.hash)+'"]').classList.add('active');
        tabs.querySelector('section'+decodeURI(window.location.hash)+'.tab').classList.add('active');
    }
    document.querySelectorAll('.ui-tabs a,a.tab-url').forEach(function(item) {
        item.addEventListener('click',function(event) {
            event.preventDefault();
            this.closest('.tabs-container').querySelector('.ui-tabs a.active').removeAttribute('class');
            this.closest('.tabs-container').querySelector('section.tab.active').classList.remove('active');
            this.closest('.tabs-container').querySelector('.ui-tabs a[href="'+this.getAttribute('href')+'"]').classList.add('active');
            this.closest('.tabs-container').querySelector('section'+this.getAttribute('href')+'.tab').classList.add('active');
        });
    });
});

这是我用来使bxslider工作的代码：

jQuery(document).ready(function($) {
    var bx = $("#bxslider23").bxSlider({
        minSlides: 3,maxSlides: 3,moveSlides: 3,easing: 'easeInOutSine',adaptiveHeight: true,infiniteLoop: false,slideMargin: 40,hideControlOnEnd: true,slideWidth: 270,keyboardEnabled: true,touchEnabled: true,controls: true,responsive : true,// wrapperClass: 'rya-wrapper',});

    // Removes empty tags inside tabs posts
    $('p:empty').remove();

    // Reloads the carousel after tab click
    $('.ui-tabs-nav>li').on('click',function(e) {
        e.preventDefault();
        // $('.bx-controls-direction').show();
        bx.redrawSlider();
    });
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bxsliderjavascriptjquerysliderslidertabstabs