查询选择器返回数据目标的空值，但是console.log显示它存在

Question

我正在学习在html/js中制作标签的教程。这里的方法是，我们有一堆针对html中其他元素的按钮。

<ul class="tabs">
<li data-tab-target="#overview">
<button class="tab-button" id='tab-button-1'>
Overview
</button>
</li>
<li data-tab-target="#learn">
<button class="tab-button" id='tab-button-2'>
Learn
</button>
</li>
<li data-tab-target="#more">
<button class="tab-button" id='tab-button-3'>
More
</button>
</li>
</ul>

这些li都有对应这些div的数据属性:

<div id="#overview" data-tab-content>
This is a test.
</div>
<div id="#learn" data-tab-content>
Learn blah blah blah
</div>
<div id="#more" data-tab-content>
Something something something.
</div>

这里的重点是，当我们点击一个按钮在ul中，JavaScript找到按钮对应的目标，并添加一个类，我们可以用css样式(使其不隐藏等)

本教程的JS有以下代码，该代码应该在单击选项卡时将类'active'添加到选项卡的数据目标中:

const tabs = document.querySelectorAll('[data-tab-target]');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = document.querySelector(tab.dataset.tabTarget);
target.classList.add('active');
})
})

第一行const tabs = document.querySelectorAll('[data-tab-target]');返回ul的元素，但是当我单击其中一个选项卡时，控制台给了我错误:Cannot read property 'classList' of null.为了尝试查看错误，我做了console.log(tab.dataset.tabTarget)，它给了我ul中第一个元素的数据目标，#overview。我不知道什么是错的，出于某种原因，它将目标分配为空值。这段代码显然适用于每个选项卡，因为当我点击其中任何一个选项卡时，它都会给我相同的错误。如果需要更多的上下文，我会链接视频:https://www.youtube.com/watch?v=5L6h_MrNvsk.

Answer 1

只要从标签id中去掉#就可以了。

记得"#";选择器中的字符是根据id获取元素的标志，而不是元素id的一部分。

<div id="overview" data-tab-content>
This is a test.
</div>
<div id="learn" data-tab-content>
Learn blah blah blah
</div>
<div id="more" data-tab-content>
Something something something.
</div>

const tabs = document.querySelectorAll('[data-tab-target]');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = document.querySelector(tab.dataset.tabTarget);
target.classList.add('active');
})
})

.active{
color: red
}

<ul class="tabs">
<li data-tab-target="#overview">
<button class="tab-button" id='tab-button-1'>
Overview
</button>
</li>
<li data-tab-target="#learn">
<button class="tab-button" id='tab-button-2'>
Learn
</button>
</li>
<li data-tab-target="#more">
<button class="tab-button" id='tab-button-3'>
More
</button>
</li>
</ul>
<div id="overview" data-tab-content>
This is a test.
</div>
<div id="learn" data-tab-content>
Learn blah blah blah
</div>
<div id="more" data-tab-content>
Something something something.
</div>