I want to use aria-expanded="true" to change a css property like an active class :
<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>
I want the <a> to background-color: #42DCA3 but only when aria-expanded="true".
This question is related to
javascript
jquery
html
css
Why javascript when you can use just css?
a[aria-expanded="true"]{_x000D_
background-color: #42DCA3;_x000D_
}<li class="active">_x000D_
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true"> _x000D_
<span class="network-name">Google+</span>_x000D_
</a>_x000D_
</li>_x000D_
<li class="active">_x000D_
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false"> _x000D_
<span class="network-name">Google+</span>_x000D_
</a>_x000D_
</li>li a[aria-expanded="true"] span{_x000D_
color: red;_x000D_
}<li class="active">_x000D_
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true">_x000D_
<span class="network-name">Google+</span>_x000D_
</a>_x000D_
</li>_x000D_
<li class="active">_x000D_
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false">_x000D_
<span class="network-name">Google+</span>_x000D_
</a>_x000D_
</li>li a[aria-expanded="true"]{_x000D_
background: yellow;_x000D_
}<li class="active">_x000D_
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true">_x000D_
<span class="network-name">Google+</span>_x000D_
</a>_x000D_
</li>_x000D_
<li class="active">_x000D_
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false">_x000D_
<span class="network-name">Google+</span>_x000D_
</a>_x000D_
</li>You could use querySelector() with attribute selector '[attribute="value"]', then affect css rule using .style, as you can see in the example below:
document.querySelector('a[aria-expanded="true"]').style.backgroundColor = "#42DCA3";<ul><li class="active">_x000D_
<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>_x000D_
</li>_x000D_
<li>_x000D_
<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>_x000D_
</li>_x000D_
</ul>jQuery solution :
If you want to use a jQuery solution you could simply use css() method :
$('a[aria-expanded="true"]').css('background-color','#42DCA3');
Hope this helps.
If you were open to using JQuery, you could modify the background color for any link that has the property aria-expanded set to true by doing the following...
$("a[aria-expanded='true']").css("background-color", "#42DCA3");
Depending on how specific you want to be regarding which links this applies to, you may have to slightly modify your selector.
Source: Stackoverflow.com