3

由于某些可访问性需求，我想将焦点转移到锚点。

原因是阅读浏览器。当我单击“聚焦到锚点”链接时，我希望浏览器开始从锚点读取页面，但为此我需要关注它。

我还想要从这个锚点开始的标签导航。我不想使用 tabindex，这不是一个真正的使用它的好方法。我也不想在 URL 中使用 #hash，我的页面不需要任何自动滚动功能。

不幸的是，今天我下面的代码不起作用。这只是一个例子来说明我的需要。

<div id="content">

  <p>Paragraph...</p>
  <p>Paragraph...</p>
  <a href="#">A link</a>
  <p>Paragraph...</p>
  <p>Paragraph...</p>

  <a name="myAnchor"></a>

  <p>Paragraph...</p>
  <p>Paragraph...</p>
  <a href="#">A link</a>
  <p>Paragraph...</p>
  <p>Paragraph...</p>

  <a href="javascript:;" id="focusToAnchor">Focus to anchor</a>

</div>
<script type="text/javascript">
    $('#focusToAnchor').click(function() { $('a[name="myAnchor"]').focus(); });
</script>

有什么建议吗？谢谢

4

1 回答 1

1

首先你需要将代码包装在一个$(document).ready()函数中接下来我会将name属性更改为 id 并在点击处理程序中使用普通选择器

我还将使用 hashbang 作为 href 来维护有效的 html，但防止点击处理程序中的默认值

<a id="myAnchor"></a>
$(document).ready(function(){
   $('#focusToAnchor').click(function(e) {
       e.preventDefault();

       $("#myAnchor").focus(); 
   });
});

用小提琴更新

http://jsfiddle.net/hxUpQ/11/它似乎没有触发样式，但元素肯定会得到焦点，因为它正在触发焦点事件。我还测试了是否有其他东西突然窃取了焦点，但我的测试没有显示出这种情况。

于 2013-11-01T20:16:53.913 回答