Ich möchte Arie schäumten = „true“ verwenden, um eine CSS-Eigenschaft zu ändern

Question

Ich möchte aria-expanded="true" verwenden, um eine CSS-Eigenschaft wie eine aktive Klasse zu ändern:

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

ich die <a> zu background-color: #42DCA3 wollen, aber nur dann, wenn aria-expanded="true".

Answer 1

Warum Javascript, wenn Sie nur CSS verwenden können?

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>

Answer 2

Wenn Sie mit JQuery geöffnet waren, könnten Sie die Hintergrundfarbe für jeden Link ändern, die die Eigenschaft aria-expanded Satz auf true hat durch die folgenden Aktionen ausführen ...

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

Je nachdem, wie bestimmte Sie wollen In Bezug darauf, auf welche Links dies zutrifft, müssen Sie Ihren Selektor möglicherweise geringfügig ändern.

Answer 3

könnten Sie verwenden querySelector() mit Attributselektor '[attribute="value"]', dann CSS-Regel beeinflussen .style verwenden, wie Sie im Beispiel unten sehen können:

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 Lösung:

Wenn Sie eine jQuery-Lösung verwenden möchten, können Sie einfach css() meth verwenden od:

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

Hoffe, das hilft.