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

Question

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

在下面的示例中，我能想到的唯一方法是为 <li> 制作背景色。标签更改颜色是通过 aria-selected="true" 进行的标签。在 jquery 中遍历所有选项卡并查找 aria-selected="true" 的最佳方法是什么？然后将“事件”类添加到 <li>仅更改该选项卡的背景颜色？然后如果是 aria-selected="false"显然 removeClass “active”。

是的，可以有多个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')

            }
        });