切换一组标签页时，为什么内容在点击时不会重新显示？

Question

在下面的代码片段中，我试图在页面上的两组内容之间切换。页面初始化所需的内容，但是当我单击另一个选项卡时，相应的内容没有显示出来。如果我点击第一个选项卡，内容也会消失。

我如何正确地切换内容而不消失?

let dropdown = document.querySelector('.dropdown-select');
let dropdownItem = document.querySelectorAll('.dropdown-select .menu li');
dropdown.addEventListener('click', (e) => {
if (dropdown.classList.contains('closed')) {
dropdown.classList.remove('closed');
dropdown.classList.add('open');
} else {
dropdown.classList.add('closed');
dropdown.classList.remove('open');
}
});
for (let i = 0; i < dropdownItem.length; i++) {
dropdownItem[i].addEventListener('click', function () {
let dropdownItemClicked = document.querySelector('.menu li.active');
if (dropdownItemClicked) dropdownItemClicked.classList.remove('active');
dropdownItem[i].classList.add('active');
})
}
const options = document.querySelectorAll('.menu li')
const results = document.querySelectorAll('.tabbed-content div')
options.forEach(e => e.addEventListener('click', function () {
results.forEach(f => f.style.display = f.id == e.dataset.target ? "block" : "none")
}));

.dropdown-select {
transition: all 0.2s ease;
overflow: hidden;
cursor: pointer;
border-top: 1px solid #E0E5EC;
width: 100%;
}
@media (min-width: 768px) {
.dropdown-select {
display: flex;
align-items: center;
cursor: default;
border-bottom: 1px solid #E0E5EC;
height: 3.75rem;
}
}
.dropdown-select.open {
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
.dropdown-select.open {
box-shadow: unset;
}
}
.dropdown-select__title {
display: flex;
align-items: center;
padding-top: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #E0E5EC;
}
@media (min-width: 768px) {
.dropdown-select__title {
border-bottom: unset;
}
}
.dropdown-select__title h6 {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
pointer-events: none;
}
.dropdown-select__title img {
width: 1.312rem;
height: 0.656rem;
margin-left: auto;
transition: all 0.2s ease;
}
@media (min-width: 768px) {
.dropdown-select__title img {
display: none;
}
}
.dropdown-select ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.dropdown-select .menu li {
font-size: 1rem;
line-height: 1.5rem;
padding: 1rem 0;
font-weight: 800;
color: #6D7582;
}
@media (min-width: 768px) {
.dropdown-select .menu li {
padding: 0;
cursor: pointer;
display: flex;
flex-direction: column;
}
.dropdown-select .menu li:first-child {
margin-right: 2rem;
}
}
.dropdown-select .menu li.active {
color: #005fec;
}
@media (min-width: 768px) {
.dropdown-select .menu li.active {
border-bottom: 4px solid #005fec;
}
}
.dropdown-select__title,
.dropdown-select .menu {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
@media (min-width: 768px) {
.dropdown-select__title,
.dropdown-select .menu {
display: flex;
align-items: center;
padding-left: 0;
padding-right: 0;
margin-right: 3.875rem;
}
}
.dropdown-select.closed .menu {
height: 0;
}
.dropdown-select.closed img {
transform: rotate(180deg);
}
.tabbed-content {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.tabbed-content .release {
display: none;
}
@media screen and (min-width: 500px) {
.tabbed-content {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}

<main>
<div class="dropdown-select closed">
<div class="dropdown-select__title">
<h6>Other Releases</h6>
<img src="https://cdn-icons-png.flaticon.com/24/25/25243.png" alt="down caret ">
</div>
<ul class="menu">
<li data-target="fall21" class="active">Fall 2021</li>
<li data-target="summer21">Summer 2021</li>
</ul>
</div>
<h6 class="intro kicker kicker--bold">Product Releases</h6>
<div class="tabbed-content">
<div id="fall21" class="release" style="display: block;">
<div class="page-hero">
<h2>Fall 2021</h2>
</div>
</div>
<div id="summer21" class="release">
<div class="page-hero">
<h2>Summer 2021</h2>
</div>
</div>
</div>
</main>

Answer 1

我已经修复了你的代码片段。

你刚刚在这行选择器上有一个错误:const results = document.querySelectorAll('.tabbed-content div')

您需要添加>来只选择直接子.tabbed-content的或者它会选择里面的所有div.

就是这一行:const results = document.querySelectorAll('.tabbed-content > div'

let dropdown = document.querySelector('.dropdown-select');
let dropdownItem = document.querySelectorAll('.dropdown-select .menu li');
dropdown.addEventListener('click', (e) => {
if (dropdown.classList.contains('closed')) {
dropdown.classList.remove('closed');
dropdown.classList.add('open');
} else {
dropdown.classList.add('closed');
dropdown.classList.remove('open');
}
});
for (let i = 0; i < dropdownItem.length; i++) {
dropdownItem[i].addEventListener('click', function () {
let dropdownItemClicked = document.querySelector('.menu li.active');
if (dropdownItemClicked) dropdownItemClicked.classList.remove('active');
dropdownItem[i].classList.add('active');
})
}
const options = document.querySelectorAll('.menu li')
const results = document.querySelectorAll('.tabbed-content > div')
options.forEach(e => e.addEventListener('click', function () {
results.forEach(f => f.style.display = f.id == e.dataset.target ? "block" : "none")
}));

.dropdown-select {
transition: all 0.2s ease;
overflow: hidden;
cursor: pointer;
border-top: 1px solid #E0E5EC;
width: 100%;
}
@media (min-width: 768px) {
.dropdown-select {
display: flex;
align-items: center;
cursor: default;
border-bottom: 1px solid #E0E5EC;
height: 3.75rem;
}
}
.dropdown-select.open {
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
.dropdown-select.open {
box-shadow: unset;
}
}
.dropdown-select__title {
display: flex;
align-items: center;
padding-top: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #E0E5EC;
}
@media (min-width: 768px) {
.dropdown-select__title {
border-bottom: unset;
}
}
.dropdown-select__title h6 {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
pointer-events: none;
}
.dropdown-select__title img {
width: 1.312rem;
height: 0.656rem;
margin-left: auto;
transition: all 0.2s ease;
}
@media (min-width: 768px) {
.dropdown-select__title img {
display: none;
}
}
.dropdown-select ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.dropdown-select .menu li {
font-size: 1rem;
line-height: 1.5rem;
padding: 1rem 0;
font-weight: 800;
color: #6D7582;
}
@media (min-width: 768px) {
.dropdown-select .menu li {
padding: 0;
cursor: pointer;
display: flex;
flex-direction: column;
}
.dropdown-select .menu li:first-child {
margin-right: 2rem;
}
}
.dropdown-select .menu li.active {
color: #005fec;
}
@media (min-width: 768px) {
.dropdown-select .menu li.active {
border-bottom: 4px solid #005fec;
}
}
.dropdown-select__title,
.dropdown-select .menu {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
@media (min-width: 768px) {
.dropdown-select__title,
.dropdown-select .menu {
display: flex;
align-items: center;
padding-left: 0;
padding-right: 0;
margin-right: 3.875rem;
}
}
.dropdown-select.closed .menu {
height: 0;
}
.dropdown-select.closed img {
transform: rotate(180deg);
}
.tabbed-content {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.tabbed-content .release {
display: none;
}
@media screen and (min-width: 500px) {
.tabbed-content {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}

<main>
<div class="dropdown-select closed">
<div class="dropdown-select__title">
<h6>Other Releases</h6>
<img src="https://cdn-icons-png.flaticon.com/24/25/25243.png" alt="down caret ">
</div>
<ul class="menu">
<li data-target="fall21" class="active">Fall 2021</li>
<li data-target="summer21">Summer 2021</li>
</ul>
</div>
<h6 class="intro kicker kicker--bold">Product Releases</h6>
<div class="tabbed-content">
<div id="fall21" class="release" style="display: block;">
<div class="page-hero">
<h2>Fall 2021</h2>
</div>
</div>
<div id="summer21" class="release">
<div class="page-hero">
<h2>Summer 2021</h2>
</div>
</div>
</div>
</main>