[英]How to use aria-expanded=“true” to change a css property
我想使用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"
。
当您只能使用 css 时,为什么要使用 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>
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>
如果您愿意使用 JQuery,则可以通过执行以下操作来修改将aria-expanded
属性设置为 true 的任何链接的背景颜色...
$("a[aria-expanded='true']").css("background-color", "#42DCA3");
根据您希望将其应用于哪些链接的具体程度,您可能需要稍微修改您的选择器。
您可以将querySelector()
与属性选择器'[attribute="value"]'
,然后使用.style
影响 css 规则,如下例所示:
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');
希望这会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.