我想使用aria-expanded =" true"更改css属性

时间:2016-10-07 22:18:29

标签: javascript jquery html 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"

4 个答案:

答案 0 :(得分:95)

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:5)

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 :(得分:0)

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

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

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

答案 3 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;

jQuery解决方案:

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

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

希望这有帮助。