我有一个带圆点的侧面导航(点击时每个点滚动以固定页面)。
出于可访问性目的,我希望用户能够通过点进行选项卡。我已经设置了一个<span>
元素来包装每个点的锚点,而tabindex工作正常,但是..
我希望点击事件在nav元素上显示时触发。即:如果它们选择点2,它应该模仿一个点击事件,这样就可以将它们带到那个锚点。
可能的?
答案 0 :(得分:1)
如果我理解正确,我认为您应该能够通过在点上听“焦点”事件并在收到点时模拟点击点来解决您的问题。有几种方法可以执行此操作,具体取决于您使用的框架(如果有)。例如,如果您正在使用jQuery,并且通过使用“dot”类来标识点:
$('.dot').focus(function(e) {
e.target.click();
}
这是我放在一起的一个小测试页面 - 它似乎适用于IE10和Chrome:
<html>
<head>
<script type="text/javascript">
function handleOnLoad() {
var elems = document.getElementsByTagName("span");
var i;
for (i = 0; i < elems.length; ++i) {
elems[i].onfocus = function(event) {
if (event.target) {
event.target.firstChild.firstChild.click();
}
else if (event.srcElement) {
event.srcElement.firstChild.firstChild.click();
}
}
}
}
</script>
</head>
<body onload="handleOnLoad()">
<span class="focus" tabindex="1"><ul class="inactive" tag="scroller"><a href="#scroll1">Foo</a></ul></span>
<span class="focus" tabindex="2"><ul class="inactive" tag="scroller"><a href="#scroll2">Bar</a></ul></span>
<span class="focus" tabindex="3"><ul class="inactive" tag="scroller"><a href="#scroll3">Baz</a></ul></span>
<span class="focus" tabindex="4"><ul class="inactive" tag="scroller"><a href="#scroll4">Ban</a></ul></span>
</body>
</html>