Question

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

在下面的示例中，我能想到使<li>标记的背景颜色改变颜色的唯一方法是使用aria-selected="true"标记。在jquery中查看所有选项卡并查找aria-selected="true"然后将addClass“active”添加到<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>

提前感谢您的任何帮助。

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中更改选项卡背景颜色

1 个答案: