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"
.
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>
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>
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.
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.