html - 从html中的无序列表中选择元素

Question

我有一个垂直元素列表。我想从列表中选择元素。此外，所选元素将变为绿色或任何颜色。一次只能从列表中选择一项。我可以创建列表。但是，不知道如何通过单击鼠标使其具有选择性并在选择后改变颜色。我需要为此使用任何 CSS 吗？

<div class="items">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
  <ul>
</div>

Answer 1

给每个 li 元素一个 tabindex，并添加这个 CSS:

li:focus {
  background: lightgreen;
}

<div class="items">
  <ul>
    <li tabindex="1">Item1</li>
    <li tabindex="1">Item2</li>
    <li tabindex="1">Item3</li>
  <ul>
</div>

---

要在纯 JavaScript 中执行此操作:

1. 将点击事件监听器添加到 ul 元素。
2. 如果事件的目标是 li 元素:
   2a.如果已选择一个现有的 li，请删除其类。
   2b.将选定的类添加到事件的目标。

document.querySelector('ul').addEventListener('click', function(e) {   // 1.
  var selected;
  
  if(e.target.tagName === 'LI') {                                      // 2.
    selected= document.querySelector('li.selected');                   // 2a.
    if(selected) selected.className= '';                               // "
    e.target.className= 'selected';                                    // 2b.
  }
});

.selected {
  background: lightgreen;
}

<div class="items">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
  <ul>
</div>

请注意 LI 在 e.target.tagName === 'LI' 中必须大写。