私はアクティブなクラスのようなCSSプロパティを変更するために<code>aria-expanded="true"</code>を使用したいCSSプロパティ

Question

を変更するにはアリア展開=「true」を使用したい：

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

私は<a>background-color: #42DCA3にしたいが、場合にのみ、 aria-expanded="true"。

Answer 1

JavaScriptを使用できるのはなぜですか？

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

あなたはjQueryのを使用することに開いていた場合は、次の操作を行って、trueにプロパティaria-expandedセットを持つ任意のリンクの背景色を変更する可能性が...あなたがしたいどのように特定の依存

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

これに該当するリンクがある場合は、セレクタを少し変更する必要があります。

Answer 3

あなたは以下の例に見ることができるように、その後、.styleを使用してCSSルールに影響を与え、属性セレクタ'[attribute="value"]'でquerySelector()を使用することができます。

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のソリューションを：

jQueryソリューションを使用する場合は、単にcss()のmeth od：

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

これが役に立ちます。