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>

如果可能的话，解决方案需要基于Javascript，而不是像JQuery这样的东西

---

非常感谢您提供的任何帮助

如果您正在使用id，它们应该是唯一的，所以您需要对相同的名称使用类。 改变

到

并为holder html元素指定一个类名。我假设您将文本存储在

标记中，所以应该是这样的

改变

<a id="abc1">



到



这很简单
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>


完整的工作代码段：

var pos=0；
$（“#btn1”）。在（“单击”，函数（）{
$（'a'）.closest（'abc1'）.eq（pos.focus（）；
pos=（pos这些答案实际上不会在你所尝试的游戏结束时起作用

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

其他答案提供的代码将从按钮转到下一个类元素。您希望从给定的类（即第一类、第二类…等）获取

做所有其他事情来更改类…@Manwal使用了一个结构非常好的代码集。
ID应该是唯一的。这是糟糕的html。更具体地说，这是无效的html。因此，对它进行操作所产生的任何行为都是未定义的。为什么问题会被升级？虽然OPs代码无效，但仍然是一个体面的问题。脚本是错误的，html是错误的。显示了一些尝试，但没有显示出对类和ID的全面理解。可能应该参考css和jquery对它们进行更多的研究，以便理解更深入一些。
$("#btn1").on("click", function () {
    $(this).next(".myNiceClass").focus();
 });

<a id="abc1">

<a class="myNiceClass">

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

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

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

$('#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");
   }
});