跳过隐藏的选项卡索引

Skip hidden tab indexes

本文关键字：索引 选项 隐藏      更新时间：2023-09-26

我有以下html:

<span tabindex="19">
</span>
<span tabindex="20">
</span>
<span tabindex="21">
</span>
<span id="hidden" tabindex="22">
</span>
<span tabindex="23">
</span>
<span tabindex="24">
</span>

正如你所看到的，其中一个跨度是隐藏的，隐藏它的代码是

#hidden
{
display: none;
}

我想要一种tab跳过隐藏索引的行为。所以当我点击标签时，我想要这样的东西：-转到19,20,21,23,24

我无法控制选项卡索引，因为它们在htmli过程中是硬编码的。

谢谢大家！！

我尝试了很多东西，所以我用隐藏它是错误的

#hidden
{
display : none.
}

我试过

#hidden
{visibility : hidden }

tab跳过标记为隐藏的链接。

您可以给它一个负的tabindex，它应该被浏览器忽略。有一些jQuery插件也可以做到这一点，比如SkipOnTabhttps://github.com/joelpurra/skipontab.

var $hidden = $('#hidden');
$hidden.attr('tabindex', '-' + $hidden.attr('tabindex'));

如果您发布代码会有所帮助，但您可以尝试以下操作：

$("#hidden").attr("disabled","disabled");

通常，tab事件会自动跳过不可见的HTML元素。然而，硬编码的HTML部分可以在页面加载后用JavaScript覆盖：

<script>
    window.addEventListener("load", function()
    {
        document.getElementById("hidden").setAttribute("tabindex", "-1");
    });
</script>

JQuery也是一个解决方案，但对于这个简单的任务来说，90kByte有点重。

相关文章：