相对标签索引

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 属性中的值即可。您必须使用此方法才能在子菜单打开/关闭时进行更新，但您应该了解其进展情况。