Question

当按钮对准焦点时，我试图让该站点导航同一站点内的另一个页面。因此，就像您单击按钮时一样，它会将用户带到站点中的页面，我希望当用户使用Tab键将注意力集中在按钮上时，浏览器就像选择了按钮一样导航到该页面。

我尝试了几种方法，但是似乎都没有用，这就是我目前正在使用的方法，

Collectors.toSet()

current project link

Answer 1

只需将位置替换为window.location。无需模拟点击。

但是，我将说这不是最佳实践，如果用户无意中单击了选项卡或其他内容，该怎么办？与仅将其保留为单击按钮相比，这要难得多。但是我离题了，选择权是您的，这就是您的选择方法:)

$('#tabbyRef').focus(function(){
  window.location = $('#tabbyRef').attr('href');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">First one</a>
<br>
<a href="#">Second one</a>
<br>
<a id="tabbyRef" href="https://stackoverflow.com">Tab to me</a>

编辑：

您可以通过几种不同的方式从特定的元素集开始。

第一种方式：获取所有元素，然后仅关注任意随机元素。我在这里选了第二个。

$(document).ready(function(){
    x = $(document).find('a');
    $(x[1]).focus();
})

$('#tabbyRef').focus(function(){
  window.location = $('#tabbyRef').attr('href');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">First one</a>
<br>
<a href="#">Second one</a>
<br>
<a id="tabbyRef" href="https://stackoverflow.com">Tab to me</a>

第二种方式：使用ID或检查hrefs的值从此处开始。

$(document).ready(function(){
    $('a[href^="waffle"]').focus();
})

$('#tabbyRef').focus(function(){
  window.location = $('#tabbyRef').attr('href');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">First one</a>
<br>
<a href="waffle">Second one</a>
<br>
<a id="tabbyRef" href="https://stackoverflow.com">Tab to me</a>

Answer 2

尝试...

$('a.link, .nav-item').focus(onFocus);


function onFocus() {
    $this = $(this);
    if ($this.focus === true) {
        $this.click();
    }
}

焦点事件（jQuery）触发鼠标单击goTo href

2 个答案: