将焦点从索引转移到活动选项卡的主体并首先聚焦 link

Question

I have a tab when the first index is selected and I press the tab key the focus goes to the next index but here I want to focus the first link in the body of the first index.

这是我的代码。 when Tab1 is selected and I press tab key the Tab2 becomes focused but I want when Tab1 is selected and I press tab key the focused should transfer to New1 link in the tab1 body not to index 2.

<div class="csg-hover-box-categories">
    <ul id="category-section" class="a-nostyle a-list-link">
        <li class="csg-category">
            <a class="active" href="#1" rel="#tab1">Tab 1</a>
        </li>
        <li class="csg-category">
            <a class="active" href="#1" rel="#tab2">Tab 2</a>
        </li>
        <li class="csg-category">
            <a class="active" href="#1" rel="#tab3">Tab 3</a>
        </li>
    </ul>
</div>
<div class="csg-hover-box-content activ" id="tab1">
    <ul class="category-list a-nostyle a-list-link ">
        <li>
            <a href="#">New1</a>
        </li>
        <li>
            <a href="#">New2</a>
        </li>
        <li>
            <a href="#">New3</a>
        </li>
    </ul>
</div>
<div class="csg-hover-box-content" id="tab2">
    <ul class="category-list a-nostyle a-list-link ">
        <li>
            <a href="#">New1</a>
        </li>
        <li>
            <a href="#">New2</a>
        </li>
        <li>
            <a href="#">New3</a>
        </li>
    </ul>
</div>
<div class="csg-hover-box-content" id="tab3">
    <ul class="category-list a-nostyle a-list-link ">
        <li>
            <a href="#">New1</a>
        </li>
        <li>
            <a href="#">New2</a>
        </li>
        <li>
            <a href="#">New3</a>
        </li>
    </ul>
</div>

jQuery

$(document).ready(function() {
    $("#category-section li a").mouseover(function() {
        $('.csg-category a').each(function() {
            $(this).removeClass('active');
        });
        $('.csg-category div.arrow').each(function() {
            $(this).hide();
        });
        $(this).addClass('active');
        $(this).siblings('div.arrow').show();
        id = $(this).attr('rel');
        $('.csg-hover-box-content').each(function() {
            $(this).removeClass('active');
        });
        $(id).addClass('active');
    });

    $("#category-section li a").focus(function() {
        $('.csg-category a').each(function() {
            $(this).removeClass('active');
        });
        $('.csg-category div.arrow').each(function() {
            $(this).hide();
        });
        $(this).addClass('active');
        $(this).siblings('div.arrow').show();
        id = $(this).attr('rel');
        $('.csg-hover-box-content').each(function() {
            $(this).removeClass('active');
        });
        $(id).addClass('active');
    });
    });

Answer 1

您可以使用 tabIndex 属性来控制 Tab 键顺序。这是一个例子：

<a href="#" tabindex="2">New1</a>

和参考 link：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

将焦点从索引转移到活动选项卡的主体并首先聚焦 link

Transfer Focus from index to the body of active tab and focus first link

jquery

tabs

focus