从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'。