js+获取已选择中的a标签页

在JavaScript中，获取已选择（即激活状态）的<a>标签页通常涉及到操作DOM元素和处理事件。以下是基础概念和相关操作的详细解释：

基础概念

DOM（文档对象模型）：DOM是HTML和XML文档的编程接口。它提供了对文档的结构化的表示，并定义了访问和操作文档的方式。
事件监听：JavaScript允许你在HTML元素上添加事件监听器，以便在特定事件发生时执行代码。
激活状态的<a>标签：在HTML中，激活状态的<a>标签通常通过添加active类或其他自定义属性来标识。

类型与应用场景

导航菜单：在网站的导航菜单中，通常需要高亮显示当前访问的页面。
标签页组件：在复杂的Web应用中，标签页组件需要标识当前激活的标签。

示例代码

以下是一个简单的示例，展示如何获取并设置激活状态的<a>标签：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Active Tab Example</title>
<style>
  .active {
    color: red;
  }
</style>
</head>
<body>

<ul>
  <li><a href="#home" class="nav-link">Home</a></li>
  <li><a href="#about" class="nav-link">About</a></li>
  <li><a href="#contact" class="nav-link">Contact</a></li>
</ul>

<script>
  // 获取所有的导航链接
  const navLinks = document.querySelectorAll('.nav-link');

  // 为每个链接添加点击事件监听器
  navLinks.forEach(link => {
    link.addEventListener('click', function(event) {
      event.preventDefault(); // 阻止默认的跳转行为

      // 移除所有链接的激活状态
      navLinks.forEach(navLink => navLink.classList.remove('active'));

      // 给当前点击的链接添加激活状态
      this.classList.add('active');
    });
  });

  // 初始化时设置当前页面的激活链接
  function setActiveTab() {
    const hash = window.location.hash;
    if (hash) {
      const activeLink = document.querySelector(`.nav-link[href="${hash}"]`);
      if (activeLink) {
        activeLink.classList.add('active');
      }
    }
  }

  // 页面加载完成后调用初始化函数
  window.onload = setActiveTab;
</script>

</body>
</html>