使用 aria-selected=true 识别选项卡并在 jquery 中更改选项卡背景颜色

Question

我们有一个词汇表页面，可让您 select 从一百多个不同的选项卡中使用不同的词汇表术语，定义将出现在定义 div 标签中，具体取决于您 [=31] =].这一切都很好，但选项卡本身没有标识符让您知道您在哪个术语上。我想要做的是让选项卡的背景颜色根据当前显示的定义术语更改颜色。

在下面的例子中，我能想到的让 <li> 标签的背景颜色改变的唯一方法是通过 aria-selected="true" 标签。在 jquery 中遍历所有选项卡并查找 aria-selected="true" 然后将 addClass "active" 添加到 <li> 以更改背景颜色的最佳方法是什么标签？然后如果是aria-selected="false" 显然removeClass "active".

是的，页面上可能有多个aria-selected="true"，因为有不同的组，每个组都有自己的div显示window，由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')

            }
        });

使用 aria-selected=true 识别选项卡并在 jquery 中更改选项卡背景颜色

Indentify tab with aria-selected=true and change tab background color in jquery

css

jquery

tabs

wai-aria