点击链接显示对应法律文本Div的JS问题求助（含CSS方案缺陷）

一、原JS代码失效原因 #

document.querySelectorAll('.law-link')返回的是NodeList对象，并非原生数组，因此没有indexOf()方法，导致legalLinks.indexOf(e)无法获取正确索引，代码自然无法生效。

二、完整优化方案 #

1. 简化CSS（解决不可扩展+默认显示问题） #

抛弃冗余的ID选择器，用类选择器统一控制，同时给默认显示的元素加专属类：

/* 所有法律文本默认隐藏 */
.law-text {
  display: none;
}
/* 默认显示第一个法律文本 */
.law-text.active {
  display: block;
}

2. 修复并优化JS代码 #

利用forEach的索引参数实现对应关系，同时补充隐藏其他文本的逻辑，还可保留锚点的浏览器状态同步功能：

const legalLinks = document.querySelectorAll('.law-link');
const legalTexts = document.querySelectorAll('.law-text');

// 默认激活第一个法律文本
legalTexts[0].classList.add('active');

legalLinks.forEach((link, index) => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    // 先隐藏所有法律文本
    legalTexts.forEach(text => text.classList.remove('active'));
    // 显示当前点击对应的法律文本
    legalTexts[index].classList.add('active');
    // 可选：更新URL锚点，支持浏览器前进后退状态同步
    window.history.pushState(null, null, link.getAttribute('href'));
  });
});

// 可选：处理页面直接带锚点加载的情况，比如访问xxx.html#law2时自动显示对应文本
window.addEventListener('DOMContentLoaded', () => {
  const hash = window.location.hash;
  if (hash) {
    const targetText = document.querySelector(hash);
    if (targetText) {
      legalTexts.forEach(text => text.classList.remove('active'));
      targetText.classList.add('active');
    }
  }
});

3. HTML结构无需修改 #

你原有HTML结构完全兼容上述CSS和JS代码，新增法律条目时只需添加对应的<a>和<div>即可，无需改动样式和脚本。

三、方案优势 #

• 高扩展性：新增法律内容时无需修改CSS/JS，仅需补充HTML节点
• 默认显示逻辑：页面加载自动展示第一个法律文本
• 完整交互逻辑：点击链接时自动隐藏其他文本，避免多文本同时显示
• 可选锚点支持：保留URL锚点功能，支持页面刷新、前进后退的状态同步

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