html如何实现点击li实现选中

在 HTML 中，可以使用以下方法来实现点击 `li` 时选中：

1. 使用 JavaScript：使用 `onclick` 事件监听 `li` 元素的点击事件，然后在事件处理程序中添加选中样式。

<ul>
  <li onclick="selectItem(this)">Item 1</li>
  <li onclick="selectItem(this)">Item 2</li>
  <li onclick="selectItem(this)">Item 3</li>
</ul>

<script>
function selectItem(item) {
  // 移除所有已选中的元素的样式
  var selectedItems = document.querySelectorAll('li.selected');
  for (var i = 0; i < selectedItems.length; i++) {
    selectedItems[i].classList.remove('selected');
  }

  // 添加选中样式
  item.classList.add('selected');
}
</script>

2. 使用 CSS：使用 `:hover` 和 `:focus` 伪类选择器来添加选中样式。这种方法只能在鼠标点击后保持选中状态，无法在用户使用键盘时保持选中状态。

<style>
li:hover, li:focus {
  background-color: #ccc;
}
</style>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

注意：以上两种方法都需要添加 CSS 样式来定义选中状态的样式。