我正在为一个没有任何服务器端功能的网站创建一个jQuery支持的WAI-ARIA树菜单。因此,我动态更改菜单的唯一方法是检查当前URL并将其与当前文件进行比较。对于一场比赛,我需要做所有这些事情:
- 向包含与当前页面URL匹配的
<a>
元素的<li>
元素添加一个类"current"> - 将一个类"current"添加到包含
<ul>
元素的<li>
元素中,<li>
元素包含与当前页面URL匹配的<a>
元素 - 将上面编号2中目标的
<li>
元素上的aria-expanded
属性设置为true
- 将上面编号2中目标
<li>
元素的子<a>
元素上的tabindex
属性设置为0
(而不是实际为当前页面的<a>
(
以下是生成的HTML应该是什么样子(如果"owls.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>
我已经用jQuery完成了项目1到3的技巧:
$(document).ready( function () {
var pathname = (window.location.pathname.match(/[^/]+$/)[0]);
$("#nav-sub li a[href='" + pathname + "']").parents(".tree-parent").attr('aria-expanded', 'true');
$("#nav-sub li a[href='" + pathname + "']").parents("li").addClass("current");
});
然而,我是JavaScript/jQuery的新手,所以我不确定这是做我想做的事情的最好还是最有效的方法。如果有人能提出更好的方法,我将不胜感激!
但我不知道如何实现第4项,将tabindex值添加到第一级<a>
元素,因为它实际上不是当前页面的<a>
元素的父/祖先。我可以向脚本中添加什么来针对这个<a>
元素并将其tabindex值从-1更改为0?
var $treeParent = [current <a> element].closest('.tree-parent');
$('> a', $treeParent).attr('tabindex', 0);
我可能会使用
$("#nav-sub li a[href='" + pathname + "']").closest('.tree-parent').next('a').attr('tabindex','0');
此外,我可能会将一个变量设置为$("#nav-sub li a[href='" + pathname + "']")
,这样我就不必一直遍历树来获取它。如果我不止一次使用它,树父级可能也是如此。
我还没有真正测试过,但这样的东西应该会得到你想要的。