如何用原生JavaScript控制id与a标签href匹配的元素实现显示隐藏

你代码的核心错误在于，通过getAttribute('href')获取到的是字符串类型的锚点值（比如#content-1），不是DOM元素对象，本身没有classList属性，直接调用方法自然会失效。

1. 先阻止a标签的默认跳转行为，避免点击后页面发生锚点滚动
2. 把拿到的href字符串作为选择器，调用DOM查询方法获取对应的目标元素，再操作类名

const texts = document.querySelectorAll('.content p > span');
const links = document.querySelectorAll('.link-block a');
links.forEach(el => {
  el.addEventListener('click', e => {
    // 阻止a标签默认锚点跳转行为
    e.preventDefault();
    texts.forEach(text => text.classList.add('hidden'));
    const selector = e.target.getAttribute('href');
    // 用选择器查询获取对应的DOM元素
    const targetContent = document.querySelector(selector);
    // 可选链操作符避免选择器无效时报错
    targetContent?.classList.remove('hidden');
  }); 
});

你原来的CSS和HTML代码不需要修改，替换上述JS代码即可实现和jQuery版本一致的切换效果。

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