如何检测列表中的任何链接是否处于活动状态。并将css类应用于父级。

<ul id="link-list">
  <li><a href="https://www.example.com">Link 1</a></li>
  <li><a href="https://www.example.com">Link 2</a></li>
  <li><a href="https://www.example.com">Link 3</a></li>
</ul>

// 获取链接列表的父级元素
var linkList = document.getElementById("link-list");

// 获取所有链接元素
var links = linkList.getElementsByTagName("a");

// 遍历链接元素
for (var i = 0; i < links.length; i++) {
  // 创建一个新的 HTTP 请求对象
  var xhr = new XMLHttpRequest();

  // 获取当前链接的 href 属性值
  var link = links[i].getAttribute("href");

  // 发送 HEAD 请求来检测链接是否处于活动状态
  xhr.open("HEAD", link, false);
  xhr.send();

  // 检查响应状态码
  if (xhr.status == 200) {
    // 如果链接处于活动状态，将 CSS 类应用于父级元素
    links[i].parentNode.classList.add("active");
  }
}

.active {
  background-color: yellow;
}