Определить вкладку с помощью aria-selected = true и изменить цвет фона вкладки в jquery

Question

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

В приведенном ниже примере единственным способом, которым я могу придумать, чтобы сделать цвет фона для изменения цвета тега <li>, является использование тега aria-selected="true". Каков наилучший способ в jquery пройти по всем вкладкам и найти aria-selected="true", а затем добавить «активный» класс к <li>, чтобы изменить цвет фона только для этой вкладки? И затем, если это aria-selected="false", очевидно, удалить класс "активный".

Да, возможно иметь более одной aria-selected="true" на странице, потому что есть разные группы, каждая из которых имеет свое собственное окно отображения div, которое разделено тегами id.

<ul>
<li class="tab-item tab_id_01a active" role="none"><a href="#id_01a" id="label_id_01a" class="tab-link" role="menuitem" aria-selected="true">Tab Link 1</a></li>
<li class="tab-item tab_id_02a" role="none"><a href="#id_02a" id="label_id_02a" class="tab-link" role="menuitem" aria-selected="false">Tab Link 2</a></li>
<li class="tab-item tab_id_03a" role="none"><a href="#id_03a" id="label_id_03a" class="tab-link" role="menuitem" aria-selected="false">Tab Link 3</a></li>
<li etc.
</ul>

Заранее благодарим за любую помощь.

Answer 1

Попробуйте

$("ul li a").each(function () {
           if ($(this).attr("aria-selected") === "true") {
                $(this).parent().addClass('active')
            } else {
                $(this).parent().removeClass('active')

            }
        });