如何在Javascript中设置列表元素的焦点？_Javascript_Html_Accessibility

如何在Javascript中设置列表元素的焦点？

javascript html

如何在Javascript中设置列表元素的焦点？,javascript,html,accessibility,Javascript,Html,Accessibility,我已经编写了代码来显示页面上的一些元素列表。此外，我还编写了javascript代码来分割元素。因此，我的页面最初显示5个元素，每次用户单击ShowMore链接时，会显示另外5个元素。我的问题是，当我单击showmore时，我希望关注列表中的第6个元素，同样，第11、16等元素，目前，我没有收到列表中第6个元素的关注以下是一个片段： <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/j

我已经编写了代码来显示页面上的一些元素列表。此外，我还编写了javascript代码来分割元素。因此，我的页面最初显示5个元素，每次用户单击ShowMore链接时，会显示另外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>


$（文档）.ready（函数（）{
$（'ulli:gt（6）'）.hide（）；
$（'#showMore'）。单击（函数（）{
$（'#payment li:hidden'）.slice（0,5）.css（“显示”，“列表项”）；
$（“#付款li:visible:last”）.focus（）；
//以说明正确选择了最后一个LI
$（#payment li:visible:last'）.css（{“background”：“red”}）；
}); 
});
页面标题

xyz
xyz
xyz
xyz
xyz
xyz
xyz
xyz

谢谢

好吧，我不知道你是如何创建/填充

，但是使用javascript来聚焦项目，你可以使用：

document.getElementById("showMore").onclick = function focus(){
    document.getElementByClassName("li.item").focus();
}

“.item”将是为您想要的每个

定义的类（第6、11等）

要定义该类，这将取决于您如何创建/填充它们

我确实更改了HTML以在UL之外显示按钮，但是您当然应该对其进行一些更改以满足您的需要，也许可以定义列表项，这些项不是带有类的按钮，并且包括在选择器中

HTML


xyz 1
xyz 2
xyz 3
xyz 4
xyz 5
xyz 6
xyz 7
xyz 8
xyz 9
xyz 10
xyz 11
xyz 12

JAVASCRIPT

$(function() {

  if ($('#payment li').length <= 6) {
    $('#showMore').hide();
  }

  for(var i = 0; i < $('#payment li').length; i++) {
    if(i > 5) {
        $('#payment li').eq(i).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"}); 


  }); 

});

$（函数（）{
如果（$（“#付款li'）。长度5）{
$（'#payment li'）.eq（i）.hide（）
}    
}  
$（'#showMore'）。单击（函数（）{
$（'#payment li:hidden'）.slice（0,5）.css（“显示”，“列表项”）；
$（“#付款li:visible:last”）.focus（）；
//以说明正确选择了最后一个LI
$（#payment li:visible:last'）.css（{“background”：“red”}）；
}); 
});

也许我是在说显而易见的，但是

元素不是本机可聚焦的。如果要以编程方式将焦点移动到

，它必须具有

tabindex='-1'

<li tabindex='-1'>xyz</li>

xyz

现在focus（）方法应该可以工作了。

这是否意味着我的列表将是

xyz

您的列表应该是

（每6、11等一次）。其他人不会上课。现在，您将如何实现这一点，将取决于您如何生成列表以及所需的时间间隔。您好，Marcelo，我已将id属性添加到列表元素中，并使用document.getElementById（“indexOfListElement”）.focus（）来关注元素。这对我很有效。谢谢您您需要知道，ID在文档中只能使用一次。在您的情况下，我建议您改用类。什么时候开始有

getElementByClassName

函数了？

<li tabindex='-1'>xyz</li>