web-dev-qa-db-fra.com

Je veux utiliser aria-expand = "true" pour changer une propriété css

Je veux utiliser aria-expanded="true" pour changer une propriété css comme une classe active:

<li class="active">
   <a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true"> 
       <span class="network-name">Google+</span>
   </a>
</li>

Je veux le <a> à background-color: #42DCA3 mais seulement quand aria-expanded="true".

javascriptjqueryhtmlcss
27
fraser dale

Pourquoi javascript quand vous pouvez utiliser seulement css?

a[aria-expanded="true"]{
  background-color: #42DCA3;
}
<li class="active">
   <a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true"> 
       <span class="network-name">Google+</span>
   </a>
</li>
<li class="active">
   <a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false"> 
       <span class="network-name">Google+</span>
   </a>
</li>

87
Sergio Tx

li a[aria-expanded="true"] span{
    color: red;
}
<li class="active">
    <a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true">
        <span class="network-name">Google+</span>
    </a>
</li>
<li class="active">
    <a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false">
        <span class="network-name">Google+</span>
    </a>
</li>

li a[aria-expanded="true"]{
    background: yellow;
}
<li class="active">
    <a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true">
        <span class="network-name">Google+</span>
    </a>
</li>
<li class="active">
    <a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false">
        <span class="network-name">Google+</span>
    </a>
</li>

2
zubair khanzada

Si vous étiez prêt à utiliser JQuery, vous pouvez modifier la couleur d'arrière-plan de tout lien dont la propriété aria-expanded est définie sur true en procédant comme suit ...

$("a[aria-expanded='true']").css("background-color", "#42DCA3");

Selon le degré de spécificité que vous souhaitez attribuer aux liens concernés, vous devrez peut-être légèrement modifier votre sélecteur.

0
Tyler Roper