Javascript 基于当前URL向父级添加aria expanded和tabindex值

我正在为一个没有任何服务器端功能的站点创建一个jQuery支持的WAI-ARIA树菜单。因此，动态更改菜单的唯一方法是检查当前URL并将其与当前文件进行比较。为了比赛，我需要做所有这些事情：

向包含与当前页面URL匹配的元素的元素添加一个current类 向元素添加一个current类，该元素包含与当前页面URL匹配的元素 在上面第2个目标元素上，将aria expanded属性设置为true 将上面第2个元素的子元素的tabindex属性设置为0，而不是实际为当前页面的子元素 如果owls.HTML是当前页面，则生成的HTML应该是这样的：

<nav id="nav-sub">
 <ul role="tree">
  <li role="treeitem" class="tree-parent current" aria-expanded="true"><a href="" tabindex="0">Birds</a>
    <ul role="group">
      <li role="treeitem"><a href="ducks.html">Ducks</a></li>
      <li role="treeitem"><a href="geese.html">Geese</a></li>
      <li role="treeitem" class="current"><a href="owls.html">Owls</a></li>
    </ul>
  </li>
  <li role="treeitem" class="tree-parent" aria-expanded="false"><a href="" tabindex="-1">Cats</a>
    <ul role="group">
      <li role="treeitem"><a href="lions.html">Lions</a></li>
      <li role="treeitem"><a href="tigers.html">Tigers</a></li>
    </ul>
  </li>
 </ul>
</nav>

然而，我是一个JavaScript/jQuery新手，所以我不确定这是否是实现我想要的最好或最有效的方法。如果有人能提出更好的方法，我将不胜感激

但我不知道如何实现第4项，将tabindex值添加到第一级元素，因为它实际上不是当前页面元素的父/父元素。我可以向脚本中添加什么来针对该元素并将其tabindex值从-1更改为0？

我可能会使用

$("#nav-sub li a[href='" + pathname  + "']").closest('.tree-parent').next('a').attr('tabindex','0');

另外，我可能会将一个变量设置为$nav sub li a[href='+pathname+']，这样我就不必一直遍历树来获取它。如果我不止一次地使用它，可能与树父级相同

---

我还没有真正测试过，但类似的东西应该会得到你想要的

还有一条评论——除非您出于某种原因添加了某些内容，否则您的正则表达式将起作用。您当前的正则表达式将返回owls.htmlsomething，然后无法匹配href属性中的URL。需要注意的是，这是Andrew在场外提供的最后一个代码：$document.ready函数{var pathname=window.location.pathname.match/[^\/]+$/[0]；var currA=$nav sub li a[href='+pathname+']；var treeParent=currA.closest.tree-parent；treeParent.attr'aria-expanded'，true'，currA.parentsli.addClasscurrent；treeParent.children'a'。first.attr'tabindex'，'0'；}；

var $treeParent = [current <a> element].closest('.tree-parent');
$('> a', $treeParent).attr('tabindex', 0);

var $treeParent = [current <a> element].closest('.tree-parent');
$('> a', $treeParent).attr('tabindex', 0);