时间戳

首页 > 解决方案 > 使用 aria-selected=true 识别选项卡并在 jquery 中更改选项卡背景颜色

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

问题描述

我们有一个词汇表页面，可让您从具有不同词汇表术语的一百多个不同选项卡中进行选择，并且定义将根据您选择的选项卡出现在定义 div 标记中。这一切都很好，但选项卡本身没有标识符让您知道您所在的术语。我想做的是让选项卡的背景颜色改变当前显示的定义术语的颜色。

在下面的示例中，我能想到的使<li>标签的背景颜色改变颜色的唯一方法是通过aria-selected="true"标签。在 jquery 中浏览所有选项卡并查找aria-selected="true"然后将“活动”添加到<li>该选项卡以更改该选项卡的背景颜色的最佳方法是什么？然后如果它aria-selected="false"显然是 removeClass “活动”。

是的，页面上可能有多个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>

提前感谢您的任何帮助。

标签： jquerycsstabswai-aria

解决方案

尝试

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

            }
        });

推荐阅读