Jquery 键盘聚焦于多媒体资料控件

我正在使用Fancybox来创建一个大型图库，但我似乎无法找到正确的方法来使用tabindex来关注各个图库控件，以便进行键盘导航

jQuery(document).ready(function() {
      $("[data-fancybox]").fancybox({
        baseTpl : '<div class="fancybox-container" role="dialog" tabindex="-1">' +
                    '<div class="fancybox-bg"></div>' +
                    '<div class="fancybox-caption-wrap" style="top:0;padding-top:15px;background:none;">' +
                      '<div class="fancybox-caption" style="border:0;"></div>' +
                    '</div><button class="fancybox-button fancybox-button--left" data-fancybox-previous="" style="top:45%;left:0 !important;z-index:9999999;" title="Previous" tabindex="1"></button>' +
                    '<div class="fancybox-controls" style="bottom:0;top:auto;">' +
                      '<div class="fancybox-infobar" style="width:100%;">' +
                        '<div class="fancybox-infobar__body" style="background:transparent;">' +
                          '<span class="js-fancybox-index"></span>&nbsp;/&nbsp;<span class="js-fancybox-count"></span>' +
                        '</div>' +
                      '</div>' +
                    '</div>' +
                    '<div class="fancybox-controls">' +
                      '<div class="fancybox-buttons">' +
                        '<button class="fancybox-button fancybox-button--close" data-fancybox-close="" title="Close (Esc)" tabindex="1"></button>' +
                      '</div>' +
                    '</div>' +
                    '<div class="fancybox-slider-wrap">' +
                      '<div class="fancybox-slider"></div>' +
                    '</div>' +
                    '<button class="fancybox-button fancybox-button--right" data-fancybox-next="" style="top:45%;right:0 !important;z-index:9999999;position:fixed;" title="Next" tabindex="1"></button>' +
                  '</div>'
      });
    });

jQuery（文档）.ready（函数（）{
$（“[data fancybox]”。fancybox({
baseTpl:'+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
' / ' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
''
});
});

知道我做错了什么吗？我已经将tabindex=“1”附加到每个节点，并以这种方式进行了测试——当我在浏览器中使用tab时，我似乎只关注标题，而没有任何控件（按钮等）

---

虽然您可以按tab键更改导航按钮的焦点-（我添加了红色轮廓以更好地查看活动元素）-但问题是，更改图像后，“上一个/下一个”按钮会失去焦点。@Janis谢谢，但我要的是默认浏览器焦点，而不是基于CSS的焦点。然而，您的解决方案是按原样工作的。您是否知道，当元素获得焦点时，您可以简单地（使用CSS）为其设置样式？