Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/424.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 带键盘的jCarousel:使用tab键时焦点错误_Javascript_Jquery_Keyboard_Focus_Jcarousel - Fatal编程技术网

Javascript 带键盘的jCarousel:使用tab键时焦点错误

Javascript 带键盘的jCarousel:使用tab键时焦点错误,javascript,jquery,keyboard,focus,jcarousel,Javascript,Jquery,Keyboard,Focus,Jcarousel,我正在使用的0.3版本在上显示三个旋转木马。那三个旋转木马工作得很好 问题是:你不能正确使用键盘 如果在页面中使用tab键,则焦点将转到旋转木马中第一个项目的第一个链接,即使该项目不可见!例如:单击其中一个旋转木马中的下一个链接,然后使用tab键进行浏览:焦点将转到旋转木马内部不可见的链接。 如果继续使用tab键,焦点将依次转到旋转木马中所有项目的所有链接。 取而代之的是:焦点应该指向第一个可见项的第一个链接;然后,如果到达最后一个可见项目的最后一个链接,那么焦点应该离开转盘,事实上,它之外的下

我正在使用的0.3版本在上显示三个旋转木马。那三个旋转木马工作得很好

问题是:你不能正确使用键盘

如果在页面中使用tab键,则焦点将转到旋转木马中第一个项目的第一个链接,即使该项目不可见!例如:单击其中一个旋转木马中的下一个链接,然后使用tab键进行浏览:焦点将转到旋转木马内部不可见的链接。 如果继续使用tab键,焦点将依次转到旋转木马中所有项目的所有链接。 取而代之的是:焦点应该指向第一个可见项的第一个链接;然后,如果到达最后一个可见项目的最后一个链接,那么焦点应该离开转盘,事实上,它之外的下一个链接

一个解决方案是使用tabindex。。。但是页面的某些部分与网站的其他页面共享,所以我不能在我所有页面的所有链接中使用tabindex

相反,我尝试过这样的事情:

$("#carousel-editos li a").focusin(function () { 
  $("#carousel-editos li.jcarousel-item-first .post-title a").focus(); 
  return false; 
});
但它会阻止进一步使用tab键


我希望这是清楚的。。。谢谢你的帮助

我认为您需要一组您已经提供的答案。看起来您应该能够使用Javascript在HTML上动态设置tabindex属性,您需要将这些属性设置为tabbable heh,new word。我在想这样的事情:

在页面加载时,查找旋转木马中的所有可见项。使用jQuery为选项卡周期中所需的每个项目设置tabindex属性。 将tabindex属性指定给页面上要循环浏览的所有其他链接。 添加一些jQuery以在用户更改旋转木马中的项目时修改tabindex属性,然后单击next/prev按钮。
如果您在。

中对carousel createEnd和scrollEnd函数做了一个简化的示例,您就可以重置.jCarousel的内容,以便只有可见的carousel项是可选项卡的,这将更容易为您提供帮助。我已在我的代码中这样做,如下所示:

var bannerSlider_scrollEnd = function(event, carousel) {
    var $carousel = carousel.element(),
        $items = carousel.items(),
        $bannerContent,
        $visibleItemsContent = carousel.visible().find('.bannerContent');
    $items.each(function (index) {
        $bannerContent = $(this).find('.bannerContent');
        disableTabbing($bannerContent);
    });
    reenableTabbing($visibleItemsContent);
    $visibleItemsContent.find(':focusable').eq(0).focus();
 };
disableTabbing$container和reenableTabbing$container行指的是我在我的站点中编写的助手函数,它们基本上在给定容器中查找所有:可聚焦元素,并分别将tabindex设置为-1和0

完成此过程后,用户将只能通过可见的旋转木马项目而不是所有旋转木马项目进行切换