Question

我有一个带有选项列表的侧面板。 Tabbing将从一个选项移动到另一个选项。选择其中一个选项后，将出现另一个div（#focushere），焦点应该在该div上。但是，即使使用焦点，我也无法使其工作。有没有办法消除对列表框中所选选项的关注？我正在使用画外音和下巴。

＆＃13;

$(".option").on("click", function() {
  $("#focushere").focus();
});

＆＃13;

#focushere {
  width: 80px;
  height: 20px;
  background-color: #333;
}

.option {
  border:1px solid #555;
  padding: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="listbox">
  <div class="option" role="option">test 1</div>
  <div class="option" role="option">test 2</div>
  <div class="option" role="option">test 3</div>
</div>

<div id="focushere">
</div>

＆＃13;

Answer 1

似乎在JS Fiddle上工作得很好。

我只需在tabindex元素上添加div属性，并将属性分配给CSS中的:focus选择器。

:focus {border: 3px solid red;}

<div role="listbox">
  <div class="option" role="option" tabindex="0">test 1</div>
  <div class="option" role="option" tabindex="0">test 2</div>
  <div class="option" role="option" tabindex="0">test 3</div>
</div>

<div id="focushere" tabindex="0"></div>

https://jsfiddle.net/xyzcaqmk/11/

Answer 2

使用tabindex =“ - 1”这使得div可以聚焦，但不能表示。

如何在列表框中选择选项后将焦点移动到另一个div？

2 个答案: