时间戳

首页 > 解决方案 > 只显示点击标题的内容并隐藏其他

javascript - 只显示点击标题的内容并隐藏其他

问题描述

我有一个页面，其中有四个标题，标题为标题 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”时显示” 被点击。点击它时，只有被点击的标题及其对应的内容容器应该被赋予类名“活动”，以便分别应用颜色和显示样式。

一次只能激活一个内容和标题。如果单击新标题，则应在任何标题和具有它的内容上删除类名“活动”并添加到单击的标题中。

我已经为此编写了代码，但它是不可扩展的，当你有很多标题和内容时，它真的会让人不知所措。

实现此解决方案的最佳方式/方法/代码是什么？

注意：代码应该是 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>

标签： javascripthtmlcss

解决方案

您可以按照以下方式做一些事情：

const headings = document.querySelectorAll(".heading");
const contents = document.querySelectorAll(".content");

document.addEventListener("click", function(event) {
  // If we just clicked on a heading
  if (event.target.classList.contains('heading')) {
    // Extract the number from the id
    const id = parseInt(event.target.id.match(/\d+/)[0], 10);
    // Only add the active class on the current heading
    for (let i = 0; i < headings.length; i++) {
      const heading = headings[i];
      heading.classList[heading === event.target ? 'add' : 'remove']('active');
    }
    // Only add the active class on the current content
    for (let i = 0; i < contents.length; i++) {
      const content = contents[i];
      content.classList[content.id === `content-${id}` ? 'add' : 'remove']('active');
    }
  }
})
.container{display:flex;max-width:1000px;margin:0 auto;background:#f5f5f5;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>

推荐阅读