html - 相对标签索引

Question

我在导航中使用选项卡索引以允许用户通过选项卡浏览该内容。我遇到的问题是第三个和第四个(六个中的)打开一个模式。一旦该模态打开，用户必须在导航的其余部分中使用 Tab 键才能到达模态中的字段。我想让模态的表单/元素在返回导航之前捕获所有制表符，如果不阻止它返回导航元素直到模态关闭。有没有一种简单的方法可以在不使用 javascript 的情况下强制下一个选项卡跳转到模式上的第一个字段？这看起来真的很简单，但我想我是如何遗漏了一些东西。

提前致谢。

<nav>
    <a tabindex="1" href="#">A</a>
    <a tabindex="2" href="#">A</a>
    <a tabindex="3" href="#" onclick="$('.b').show();">A</a>
    <a tabindex="4" href="#">A</a>
    <a tabindex="5" href="#">A</a>
    <a tabindex="6" href="#">A</a>
    <a tabindex="7" href="#">A</a>
</nav>

<a tabindex="3" href="#" class="b" >B</a>
<a tabindex="4" href="#" class="b" >B</a>
<a tabindex="5" href="#" class="b" >B</a>
<a tabindex="6" href="#" class="b" >B</a>

这是我正在尝试做的一个小的非工作示例: http://jsfiddle.net/jeffpowrs/KgHtg/1/

Answer 1

尝试这样的事情......

http://jsfiddle.net/KgHtg/3/

$(function() {
    $('#menu1').click(function() {
        $('.b').show();
        var currentIndex = $(this).attr('tabindex');
        var greater = $('nav a').filter(function() {
            return $(this).attr('tabindex') > currentIndex;
        }).each(function() {
            $(this).attr('tabindex', parseInt($(this).attr('tabindex'), 10)+4);
        });
    });
});

您可以只更新 tabindex 属性中的值。您必须使用它才能使更新在打开/关闭子菜单上发生，但您应该了解这是怎么回事。