Question

由于需要一些辅助功能，我想将焦点转移到锚点。

这样做的原因是阅读浏览器。当我点击“Focus to anchor”链接时，我希望浏览器开始从锚点读取页面，但为此我需要关注它。

我还希望从此锚点开始选项卡导航。我不想使用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>

有什么建议吗？感谢

Answer 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/它似乎没有触发样式，但元素肯定会聚焦，因为它会触发焦点事件。我还测试了看是否有其他东西突然偷了焦点，但我的测试没有显示出这种情况。

可访问性和焦点/跳转到锚点

1 个答案: