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

我有一个html页面,身体上有n个锚标签和一个按钮标签

<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>

所有锚标签的id属性都相同
现在我只想在点击按钮时,对锚标签的关注应逐一变化
为此,我尝试了这个jquery代码,但重点不是从第一个标签改变

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

如果可能的话,解决方案需要使用Javascript而不是像JQuery那样.

任何帮助非常感谢

最佳答案
ID应该是唯一的,你的HTML是无效的

尝试使用相同名称的类而不是同名的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>

jQuery的:

$("#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

转载注明原文:javascript – 在按钮上单击如何更改焦点 - 代码日志