如何用jQuery识别aria-selected=true的标签并切换背景色

这是个很常见的Tab交互需求，用jQuery可以轻松实现，而且能完美适配你提到的多独立分组场景，避免不同组的Tab互相干扰。下面分两部分给出实现代码：

1. 页面初始化时同步状态 #

页面加载完成后，自动根据每个Tab链接的aria-selected属性，为其父级<li>设置/移除active类：

$(document).ready(function() {
  // 遍历所有Tab链接，同步父li的active类
  $('.tab-link').each(function() {
    const $tabLink = $(this);
    const $parentLi = $tabLink.closest('li.tab-item');
    
    if ($tabLink.attr('aria-selected') === 'true') {
      $parentLi.addClass('active');
    } else {
      $parentLi.removeClass('active');
    }
  });
});

2. Tab切换时更新状态 #

当用户点击Tab时，需要同步更新aria-selected属性和父级<li>的active类，同时保证同组内的Tab状态互斥：

$(document).ready(function() {
  // 处理Tab点击事件
  $('.tab-link').on('click', function(e) {
    e.preventDefault(); // 阻止默认锚点跳转行为
    const $currentTab = $(this);
    const $tabGroup = $currentTab.closest('ul'); // 锁定当前Tab所在的分组
    
    // 重置当前分组内所有Tab的状态
    $tabGroup.find('.tab-link')
      .attr('aria-selected', 'false')
      .closest('li.tab-item')
      .removeClass('active');
    
    // 设置当前点击的Tab为选中状态
    $currentTab.attr('aria-selected', 'true')
      .closest('li.tab-item')
      .addClass('active');
    
    // 可选：切换对应内容区域的显示（根据你的需求调整）
    const targetContentId = $currentTab.attr('href');
    $(targetContentId).show().siblings('[id^="id_"]').hide();
  });
});

关键细节说明： #

• 分组隔离：通过closest('ul')获取当前Tab所在的分组，确保不同组的Tab操作完全独立，不会互相影响。
• 状态同步：每次操作都会同时更新aria-selected属性和active类，保证HTML语义和视觉样式的一致性，符合无障碍设计要求。
• 灵活性：如果你的页面允许多个Tab同时选中（比如复选式Tab），只需要去掉代码中“重置当前分组内所有Tab状态”的部分即可。

内容的提问来源于stack exchange，提问作者Budmaniak