JS querySelectorAll失效 个人作品集资历板块按钮点击无响应

核心错误：querySelectorAll选择器语法错误 #

你代码中选择带data-target、data-content属性元素的写法不符合规范，document.querySelectorAll接收的是字符串格式的CSS选择器，属性选择器需要将[]写在字符串内部，不能传入数组格式的参数。
错误写法：

// 传入了数组作为参数，无法正确匹配到元素
const tabs = document.querySelectorAll(['data-target']),
      tabContents = document.querySelectorAll(['data-content'])

修正后的写法：

const tabs = document.querySelectorAll('[data-target]'),
      tabContents = document.querySelectorAll('[data-content]')

原代码因为选择器错误，导致tabs得到的是空节点集合，点击事件根本没有绑定到按钮上，所以点击无任何反应。 #

补充检查项 #

• 确认页面中存在和data-target值对应的内容区域，并且所有内容区域都添加了data-content属性，示例如下：

<!-- 已有的按钮代码保持不变 -->
<div class="qualification__container container">
  <div class="qualification__tabs">
    <div class="qualification__button button--flex qualification__active" data-target='#education'>
      <i class="uil uil-graduation-cap qualification__icon"></i>
      Education
    </div>
    <div class="qualification__button button--flex" data-target="#work">
      <i class="uil uil-briefcase-alt qualification__icon"></i>
      Work
    </div>
  </div>
  <!-- 需要补充的内容区域 -->
  <div id="education" class="qualification__content qualification__active" data-content>
    教育经历内容
  </div>
  <div id="work" class="qualification__content" data-content>
    工作经历内容
  </div>
</div>

• 确认你的JS文件是在DOM元素加载完成后执行的，建议将JS引入标签放在</body>标签之前，避免出现找不到元素的问题。

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