JQuery 将 CSS 类应用于切换元素

Question

如何将类应用到引导切换元素？

我有以下内容:

<ul class="my-nav ">
     <li >
         <a data-toggle="collapse" href="#one" aria-expanded="false" aria-controls="one" class="collapsed">
               ...
         </a>
     </li>
     <li >
         <a data-toggle="collapse" href="#two" aria-expanded="false" aria-controls="two" class="collapsed">
               ...
         </a>
     </li>
</ul>

<div class="collapse my-pane" id="one">
     <ul >
          <li ><a href="#">...</a></li>
          <li ><a href="#">...</a></li>
     </ul>
</div> 

<div class="collapse my-pane" id="two">
     <ul >
          <li ><a href="#">...</a></li>
          <li ><a href="#">...</a></li>
     </ul>
</div>                        

当我使用#one 切换链接时，我得到以下应用于它的 css:

<li >
     <a data-toggle="one" href="#one" aria-expanded="true" aria-controls="one" class="">
               ...
     </a>
</li>

现在我想在它处于事件状态时为其应用一些背景颜色。我如何使用 JQuery 将以下 css 应用于选定的 <li> :

.my-nav li.my-nav-selected a {
    background-color: background-color: #dae1f3;
 }

Answer 1

你不需要javascript，你可以用CSS做到这一点

.my-nav li a[aria-expanded="true"]{
    background-color: #dae1f3; 
}

http://jsfiddle.net/9tt7dgz9/