Question

我在导航中使用标签索引，允许用户标记该内容。我遇到的问题是第三个和第四个（六个中）打开一个模态。一旦该模态打开，用户必须通过导航的其余部分选项卡才能到达模态中的字段。我想让模态的表单/元素在返回导航之前捕获所有标签，如果没有阻止它移回导航元素直到模态关闭。是否有一种简单的方法可以强制下一个标签跳转到模态的第一个字段而不使用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属性中的值即可。你必须使用它才能在子菜单打开/关闭时进行更新，但你应该了解它的发展方向。

相对标签索引

1 个答案: