原生JS实现点击Anchor标签显示隐藏Div并隐藏自身

步骤1：调整HTML结构（可选但更简洁） #

把所有锚点标签放进一个容器，方便统一控制显示隐藏：

<div class="links-container">
  <a href="#a">a</a>
  <a href="#b">b</a>
  <a href="#c">c</a>
</div>

<div id="a" class="page"> this is a id</div>
<div id="b" class="page"> this is b id</div>
<div id="c" class="page"> this is c id</div>

注：给第三个div补上page类，统一所有内容块的选择器

步骤2：简化CSS #

移除:target相关样式，由JS控制显示逻辑：

.links-container {
  margin: 10px 0;
}
.page {
  display: none;
}

步骤3：原生JavaScript实现逻辑 #

添加以下JS代码，处理点击事件并控制元素显示隐藏：

// 获取页面元素
const linksContainer = document.querySelector('.links-container');
const anchorLinks = document.querySelectorAll('.links-container a');
const contentPages = document.querySelectorAll('.page');

// 为每个锚点绑定点击事件
anchorLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    // 阻止默认锚点跳转行为（避免页面滚动）
    e.preventDefault();
    
    // 获取目标内容块的ID（去掉href中的#）
    const targetPageId = this.getAttribute('href').substring(1);
    
    // 隐藏所有内容块
    contentPages.forEach(page => {
      page.style.display = 'none';
    });
    
    // 显示目标内容块
    const targetPage = document.getElementById(targetPageId);
    if (targetPage) {
      targetPage.style.display = 'block';
    }
    
    // 隐藏锚点容器
    linksContainer.style.display = 'none';
  });
});

可选：添加返回功能 #

如果需要从内容块回到锚点选择界面，可以给每个内容块添加返回按钮：

<div id="a" class="page"> 
  this is a id
  <button class="back-btn">返回选择</button>
</div>

然后在JS末尾添加：

// 绑定返回按钮事件
document.querySelectorAll('.back-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 显示锚点容器
    linksContainer.style.display = 'block';
    // 隐藏所有内容块
    contentPages.forEach(page => {
      page.style.display = 'none';
    });
  });
});

内容的提问来源于stack exchange，提问作者flick9000