【问题标题】:How to use aria-expanded="true" to change a css property如何使用 aria-expanded="true" 更改 CSS 属性
【发布时间】:2017-02-17 00:03:58
【问题描述】:

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

我想要&lt;a&gt;background-color: #42DCA3,但仅限于aria-expanded="true"

【问题讨论】:

    标签: javascript jquery html css


    【解决方案1】:

    既然只能使用 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>

    【讨论】:

    • 5 年后仍然有助于节省代码行数。
    【解决方案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>

    【讨论】:

      【解决方案3】:

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

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

      根据您希望将其应用于哪些链接的具体程度,您可能需要稍微修改您的选择器。

      【讨论】:

      • 是的,没关系,我没有使用其他 aria-expanded。我会把这段代码放在哪里?就在头上。谢谢
      • 或者实际上我如何使用它,以前从未使用过 jquery
      【解决方案4】:

      您可以将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');
      

      希望这会有所帮助。

      【讨论】:

        猜你喜欢
        • 2018-01-26
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-02-10
        • 2019-08-01
        • 2023-03-02
        • 2020-07-05
        相关资源
        最近更新 更多