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

Question

我有一个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那样。

任何帮助非常感谢

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>

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

Answer 2

如果您正在使用id，它们应该是唯一的，因此您需要使用相同名称的类。 变化

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

到

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

并为持有者html元素提供类名。我假设您将文本存储在a标记中，因此它应该是

更改

<a id="abc1">

到

<a class="myNiceClass">

这很容易

Answer 3

这些答案实际上不会影响您正在尝试的最终游戏......

每个人都有正确的思维过程，但实际上你需要调整他们的代码才能真正实现你想要的东西。

其他答案提供的代码将转到按钮的下一个类元素。你想要从给定的类（即第一类，第二类......等）。

$('#btn1').on("click",function(){
   var cur = $(this).next(".focused");
   if(cur.length > 0){
      cur.removeClass("focused").next(".abc1").focus().addClass("focused");
   }else{
      $(this).next("abc1").focus().addClass("focused");
   }
});

所有其他的东西都要改变类...... @Manwal使用结构很好的代码集。