菜单项的 aria-current

在Web开发中，有时需要标识当前活动的菜单项。通过使用aria-current属性，可以实现该功能。

使用方法

aria-current属性可以设置在菜单项的父节点上，并且只能取三个值：page、step和location。

page值

page表示当前页面所在的菜单项。

<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于</a></li>
    <li aria-current="page"><a href="/contact">联系</a></li>
  </ul>
</nav>

step值

step表示当前所处的步骤。

<nav>
  <ul>
    <li><a href="#">步骤1</a></li>
    <li aria-current="step"><a href="#">步骤2</a></li>
    <li><a href="#">步骤3</a></li>
  </ul>
</nav>

location值

location表示当前位置。

<nav>
  <ul>
    <li><a href="#">中国</a></li>
    <li><a href="#">北京</a></li>
    <li aria-current="location"><a href="#">东城区</a></li>
  </ul>
</nav>

注意事项

• aria-current属性只应该设置在当前活动菜单项的父节点上。
• aria-current属性应该与相应的href属性保持一致。
• aria-current属性不会更改样式，需要开发者自行设置。

以上就是菜单项的aria-current属性的简单介绍，希望能够帮助到开发者们。