div标签下的a标签添加点击事件选中和取消选中 写一个代码实例

可以使用 JavaScript 和 CSS 来实现这个功能。以下是一个简单的示例代码：

HTML 代码：

<div id="myDiv">
  <a href="#" class="myLink">Link 1</a>
  <a href="#" class="myLink">Link 2</a>
  <a href="#" class="myLink">Link 3</a>
</div>

CSS 代码：

.myLink {
  display: block;
  padding: 10px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

.myLink.selected {
  background-color: #ddd;
}

JavaScript 代码：

var links = document.querySelectorAll('#myDiv .myLink');

links.forEach(function(link) {
  link.addEventListener('click', function(event) {
    event.preventDefault();
    this.classList.toggle('selected');
  });
});

在这个示例中，我们首先使用 `querySelectorAll` 获取了 `<div>` 元素下所有带有 `myLink` 类名的 `<a>` 元素。然后，我们给每个 `<a>` 元素绑定了一个点击事件监听器，在点击时使用 `toggle` 方法来切换 `selected` 类的存在。最后，我们使用 CSS 样式来控制选中和取消选中的效果。