wake-up-neo.net

Ich möchte aria-extended = "true" verwenden, um eine CSS-Eigenschaft zu ändern

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 möchte, dass <a>background-color: #42DCA3, aber nur wenn aria-expanded="true".

javascriptjqueryhtmlcss
27
fraser dale

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>

87
Sergio Tx

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>

2
zubair khanzada

Wenn Sie sich für die Verwendung von JQuery entschieden haben, können Sie die Hintergrundfarbe für jeden Link ändern, für den die Eigenschaft aria-expanded auf true festgelegt ist. Gehen Sie dazu folgendermaßen vor:.

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

Abhängig davon, wie genau Sie festlegen möchten, für welche Links dies gilt, müssen Sie möglicherweise Ihren Selector geringfügig ändern.

0
Tyler Roper

Sie könnten querySelector() mit dem Attributselektor '[attribute="value"]' Verwenden und dann die CSS-Regel mit .style Beeinflussen, wie Sie im folgenden Beispiel 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 die css() -Methode verwenden:

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

Hoffe das hilft.

0
Zakaria Acharki