如何解决单击箭头上的bxslider,在选项卡外聚焦
所以我发生了一些奇怪的事情,我想看看是什么原因导致的-但是我已经完美地实现了我的bxslider,无论出于何种原因,当我单击滑块中的下一个或上一个箭头时,它都会聚焦元素。
此滑块位于选项卡中,首先被隐藏,然后在该选项卡可见时,使用redrawSlides
来显示滑块。
现在,如果我将滑块移到选项卡之外,它可以正常工作并移动到下一个选项卡。
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 举报,一经查实,本站将立刻删除。