Question

我想使用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"。

Answer 1

为什么javascript什么时候才能使用css？

＆＃13;

a[aria-expanded="true"]{
  background-color: #42DCA3;
}

＆＃13;

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

＆＃13;

Answer 2

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>

Answer 3

如果您愿意使用JQuery，可以通过执行以下操作修改属性aria-expanded设置为true的任何链接的背景颜色...

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

根据您希望了解的适用链接的具体情况，您可能需要略微修改选择器。

Answer 4

您可以将querySelector()与属性选择器'[attribute="value"]'一起使用，然后使用.style影响css规则，如下例所示：

＆＃13;

document.querySelector('a[aria-expanded="true"]').style.backgroundColor = "#42DCA3";

＆＃13;

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

＆＃13;

jQuery解决方案：

如果您想使用jQuery解决方案，只需使用css()方法：

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

希望这有帮助。

我想使用aria-expanded =＆＃34; true＆＃34;更改css属性

4 个答案: