Перенос Фокуса из индекса в тело активной вкладки и фокус первой ссылки - PullRequest
Новая
       11

Перенос Фокуса из индекса в тело активной вкладки и фокус первой ссылки

1 голос
/ 08 марта 2020

У меня есть вкладка, когда выбран первый индекс, и я нажимаю клавишу табуляции, фокус переходит на следующий индекс, но здесь я хочу сфокусировать первую ссылку в теле первого индекса.

Здесь мой код когда выбрана вкладка «Tab1» и я нажимаю клавишу «Tab», вкладка «Tab2» становится активной, но я хочу, чтобы при выборе «Tab1» была нажата клавиша «Tab», фокус должен переходить на ссылку «New1» в теле вкладки «tab1», а не на индекс 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');
    });
    });

1 Ответ

1 голос
/ 16 марта 2020

Вы можете использовать атрибут tabIndex для управления порядком табуляции. Вот пример: 

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

И ссылка: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

...