title: Indentify tab with aria-selected=true and change tab background color in jquery
body: <p>We have a glossary page that lets you select from over a hundred different tabs with different glossary terms and the definition will appear in the definition div tag depending on which tab you select. That's all well and good, but the tab itself has no identifier to let you know which term you are on. What I'd like to do is have the background color of the tab change color for the term of the definition that is currently displayed.</p>
  
  <p>In the below example, the only way I can think of to make the background color for the <code>&lt;li&gt;</code> tag change color is to go by the <code>aria-selected="true"</code> tag. What would be the best way in jquery to go through all the tabs and look for the <code>aria-selected="true"</code> and then addClass "active" to the <code>&lt;li&gt;</code> to change the background color for just that tab? And then if it is <code>aria-selected="false"</code> obviously removeClass "active".</p>
  
  <p>Yes, it is possible to have more than one <code>aria-selected="true"</code> on the page because there are different groups, each with its own div display window which is separated by the id tags. </p>
  
  <pre><code>&lt;ul&gt;
  &lt;li class="tab-item tab_id_01a active" role="none"&gt;&lt;a href="#id_01a" id="label_id_01a" class="tab-link" role="menuitem" aria-selected="true"&gt;Tab Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;li class="tab-item tab_id_02a" role="none"&gt;&lt;a href="#id_02a" id="label_id_02a" class="tab-link" role="menuitem" aria-selected="false"&gt;Tab Link 2&lt;/a&gt;&lt;/li&gt;
  &lt;li class="tab-item tab_id_03a" role="none"&gt;&lt;a href="#id_03a" id="label_id_03a" class="tab-link" role="menuitem" aria-selected="false"&gt;Tab Link 3&lt;/a&gt;&lt;/li&gt;
  &lt;li etc.
  &lt;/ul&gt;
  </code></pre>
  
  <p>Thanks in advance for any assistance.</p>