【发布时间】：2020-12-31 11:33:07
【问题描述】：
我有一个页面，其中有四个标题，ID 分别为标题 1、标题 2、标题 3 和标题 4。这些标头在 div 容器中包含内容，id 分别为 content-1、content-2、content-3 和 content-4。
默认显示四个标题，但仅显示“content-1”div的内容，而其余三个容器“content-2”、“content-3”和“content-4”被隐藏而不显示显示出来。
为了默认不显示这些内容，我将它们的“display”属性设置为“none”。为了显示“content-1”，我添加了“active”的类名，将“display”属性设置为block。
为了给“heading-1”一个绿色，我添加了“active”的类名，将颜色设置为绿色
任何容器“content-1”、“content-2”、“content-3”和“content-4”的内容应仅在其对应的标题“heading-1”、“heading-2”、“heading-3”和“ heading-4" 被点击。点击它时，只有被点击的标题和它对应的内容容器应该被赋予类名“active”，以便分别应用颜色和显示样式。
一次只能激活一个内容和标题。如果单击了新标题，则应在任何标题和具有它的内容上删除类名“active”，并将其添加到单击的标题中。
我已经为此编写了代码，但它不可扩展，并且当您有大量标题和内容时，它真的会让人不知所措。
实现此解决方案的最佳方式/方法/代码是什么？
注意：代码应该是 VANILLA JavaScript 而不是 Jquery。
谢谢。
const headingOne = document.getElementById("heading-1");
const headingTwo = document.getElementById("heading-2");
const headingThree = document.getElementById("heading-3");
const headingFour = document.getElementById("heading-4");
const contentOne = document.getElementById("content-1");
const contentTwo = document.getElementById("content-2");
const contentThree = document.getElementById("content-3");
const contentFour = document.getElementById("content-4");
document.addEventListener("click", function(event) {
if (event.target === headingOne) {
headingOne.classList.add("active");
headingTwo.classList.remove("active");
headingThree.classList.remove("active");
headingFour.classList.remove("active");
contentOne.classList.add("active");
contentTwo.classList.remove("active");
contentThree.classList.remove("active");
contentFour.classList.remove("active");
} else if (event.target === headingTwo) {
headingTwo.classList.add("active");
headingOne.classList.remove("active");
headingThree.classList.remove("active");
headingFour.classList.remove("active");
contentTwo.classList.add("active");
contentOne.classList.remove("active");
contentThree.classList.remove("active");
contentFour.classList.remove("active");
} else if (event.target === headingThree) {
headingThree.classList.add("active");
headingOne.classList.remove("active");
headingTwo.classList.remove("active");
headingFour.classList.remove("active");
contentThree.classList.add("active");
contentOne.classList.remove("active");
contentTwo.classList.remove("active");
contentFour.classList.remove("active");
} else if (event.target === headingFour) {
headingFour.classList.add("active");
headingOne.classList.remove("active");
headingThree.classList.remove("active");
headingTwo.classList.remove("active");
contentFour.classList.add("active");
contentOne.classList.remove("active");
contentThree.classList.remove("active");
contentTwo.classList.remove("active");
}
}).container {
display: flex;
max-width: 1000px;
margin: 0 auto;
background: whitesmoke;
border: 1px solid #ccc;
border-radius: 10px;
padding: 50px;
}
.heading {
font-size: 28px;
line-height: 140%;
cursor: pointer;
}
.heading.active {
color: green;
}
.box {
width: 50%;
}
.content {
font-size: 18px;
line-height: 25px;
display: none;
}
.content.active {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Headers/Contents</title>
</head>
<body>
<div class="container">
<div class="box box-1">
<h2 class="heading active" id="heading-1">Heading One</h2>
<h2 class="heading" id="heading-2"> Heading Two</h2>
<h2 class="heading" id="heading-3">Heading Three</h2>
<h2 class="heading" id="heading-4">Heading Four</h2>
</div>
<div class="box box-2">
<div class="content active" id="content-1">
<p>Content One</p>
</div>
<div class="content" id="content-2">
<p>Content Two</p>
</div>
<div class="content" id="content-3">
<p>Content Three</p>
</div>
<div class="content" id="content-4">
<p>Content Four</p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>【问题讨论】：
标签： javascript html css