Je veux utiliser aria-expanded = "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 <a>background-color: #42DCA3 mais uniquement quand aria-expanded="true".

24
demandé sur Zakaria Acharki 2016-10-08 01:18:29

4 réponses

pourquoi javascript quand vous pouvez utiliser juste 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>
73
répondu Sergio Tx 2016-10-07 23:17:40

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>
1
répondu zubair khanzada 2018-04-28 11:17:51

si vous êtes ouvert à L'utilisation de JQuery, vous pouvez modifier la couleur de fond pour tout lien qui a la propriété aria-expanded true en procédant comme suit...

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

selon la précision que vous voulez donner aux liens auxquels cela s'applique, vous devrez peut-être modifier légèrement votre sélecteur.

0
répondu Tyler Roper 2016-10-07 22:24:09

Vous pouvez utiliser querySelector() avec le sélecteur d'attribut '[attribute="value"]', alors affecter la règle css en utilisant .style comme vous pouvez le voir dans l'exemple ci-dessous:

document.querySelector('a[aria-expanded="true"]').style.backgroundColor = "#42DCA3";
<ul><li class="active">
  <a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true"> <span class="network-name">Google+ with aria expanded true</span></a>
  </li>
  <li>
    <a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false"> <span class="network-name">Google+ with aria expanded false</span></a>
  </li>
</ul>

jQuery solution :

si vous souhaitez utiliser une solution jQuery vous pouvez simplement utiliser css() méthode :

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

J'espère que cela vous aidera.

0
répondu Zakaria Acharki 2016-10-07 23:22:36