javascript - 在按钮上单击如何更改焦点

Question

我有一个 html 页面，正文中有 n 个 anchor 标记和一个按钮标记

<input type="button" value="Next" id="btn1">
<a id="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....  <br>
<a id="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>
<a id="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>
<a id="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>
<a id="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>

所有 anchor 标签的id属性相同 现在我只想当点击按钮时， anchor 标签上的焦点应该一个一个地改变 为此，我尝试了这个 jquery 代码，但焦点并没有从第一个标签改变

$("#btn1").on("click", function () {
    $(this).next("#abc1").focus();
 });

如果可能，解决方案需要基于使用 Javascript 而不是 JQuery 之类的东西。

非常感谢任何帮助

Answer 1

ID 应该是唯一的 你的 html 是无效的

尝试使用同名的 class 而不是同名的 id

使用这个 html:

<input type="button" value="Next" id="btn1">
<a class="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....  <br>
<a class="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>
<a class="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>
<a class="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>
<a class="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>

J查询:

$("#btn1").on("click", function () {
    $(this).next(".abc1").focus();
 });

DEMO

完整的工作片段:

---

var pos = 0;
$("#btn1").on("click", function () {
    $('a').closest(".abc1").eq(pos).focus();
    pos = (pos<4)?++pos:0;
 });

Updated DEMO