javascript - 如何在 Javascript 中将焦点设置在列表元素上？

标签 javascript html accessibility

我已经编写了代码来显示页面上的一些元素列表。另外，我还编写了 javascript 代码来对元素进行切片。因此，我的页面最初显示 5 个元素，每次用户单击“显示更多”链接时，都会显示另外 5 个元素。我的问题是，当我单击 showmore 时，我希望将焦点集中在列表的第 6 个元素上，同样，第 11 个、第 16 个元素等，目前，我没有收到列表中第 6 个元素的焦点。

这是一个片段:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('ul li:gt(6)').hide();
  $('#showMore').click(function() {
    $('#payment li:hidden').slice(0, 5).css("display", "list-item");
    $('#payment li:visible:last').focus();

    // To illustrate that the last LI gets selected properly
    $('#payment li:visible:last').css({"background" : "red"}); 


  }); 
});
</script>

<title>Page Title</title>
</head>
<body>
<ul id="payment">
  <li>xyz</li>
  <li>xyz</li>
  <li>xyz</li>
  <li>xyz</li>
  <li>xyz</li>
  <li>xyz</li>
  <li>xyz</li>
  <li>xyz</li>
</ul>

 <li id="showMore" >
    <a href="javascript:;" >Show More</a>
  </li>  
</body>
</html>

谢谢

最佳答案

也许我说的是显而易见的事情，但是 <li>元素本身不可聚焦。如果您想以编程方式将焦点移动到 <li> ，它必须有tabindex='-1' .