it-roy-ru.com

Я хочу использовать aria-extended = "true", чтобы изменить свойство CSS

Я хочу использовать aria-expanded="true", чтобы изменить свойство css как активный класс:

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

27
fraser dale

Зачем JavaScript, когда вы можете использовать только 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>

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

Если бы вы были открыты для использования JQuery, вы могли бы изменить цвет фона для любой ссылки, для свойства aria-expanded которой установлено значение true, выполнив следующие действия ...

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

В зависимости от того, насколько конкретно вы хотите указать, к каким ссылкам это относится, вам, возможно, придется немного изменить свой селектор.

0
Tyler Roper

Вы можете использовать querySelector() с селектором атрибута '[attribute="value"]', а затем воздействовать на правило css с помощью .style, как вы можете видеть в следующем примере:

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():

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

Надеюсь это поможет.

0
Zakaria Acharki