文章/答案/技术大牛

发布

社区首页 >问答首页 >只显示点击标题的内容，隐藏其他内容

问只显示点击标题的内容，隐藏其他内容
EN

Stack Overflow用户

提问于 2020-09-13 23:38:21

回答 2查看 46关注 0票数 0

我有一个有四个标题的页面，id为heading-1，heading-2，heading-3和heading-4。这些头文件包含div容器中的内容，其in分别为content-1、content-2、content-3和content-4。

默认情况下会显示四个标题，但只显示"content-1“div的内容，而其余三个容器"content-2”、"content-3“和"content-4”隐藏不显示。

为了在默认情况下不显示这些内容，我将它们的" display“属性设置为"none”。为了显示"content-1"，我添加了"active“的类名，它将" display”属性设置为block。

为了给-1\f25“heading-1\f25”-1\f6添加绿色，我添加了类名-1\f25 "active“-1\f6，它将颜色设置为绿色

任何容器" content -1“、”content-2“、”content-3“和”content-4“的内容应仅在其对应的标题"heading-1”、"heading-2“、"heading-3”和"heading-4“被单击时才会显示。单击时，只有被单击的标题及其对应的内容容器才会被赋予类名称"active”，以便分别应用颜色和显示样式。

一次只能有一个内容和标头处于活动状态。如果单击新的标头，则应该删除任何标头和内容上的类名"active“，并将其添加到单击的标头和内容中。

我已经为此写出了代码，但它不是可伸缩的，当你有大量的头和内容时，它真的会变得不堪重负。

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

注意:代码应该是普通的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>

html

css

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-09-14 00:20:30

这是另一种缩短代码的方法，对heading和content使用通用的class，而不需要设置id。

let H2 = document.querySelectorAll(".box-1 h2.heading");
let AllSet = document.querySelectorAll( ".box-2 > div.content,.box-1 h2.heading ");
for (let e of H2) {
  e.addEventListener("click", function() {
    let linkedClass = this.classList.item(1);
    toggleActive(linkedClass);
  });
}
function toggleActive(linkedClass) {
  for (let i = 0; i < AllSet.length; i++) {
    AllSet[i].classList.remove("active");
    if (AllSet[i].classList.item(1) == linkedClass) {
      AllSet[i].classList.add("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;
  margin:0;
}

.heading.active {
  color: green;
}

.box {
  flex:1;
  display:flex;
  flex-direction:column;
}
.content:nth-child(even){background:#bee}
.content {
  font-size: 18px;
  line-height: 25px;
  display: none;
  flex:1;
  background:#eeb
}

.content.active {
  display: block;
}

<div class="container">
  <div class="box box-1">
    <h2 class="heading heading-1  active">Heading One</h2>
    <h2 class="heading heading-2"> Heading Two</h2>
    <h2 class="heading heading-3">Heading Three</h2>
    <h2 class="heading heading-4">Heading Four</h2>
    <h2 class="heading heading-5">Heading Five</h2>
  </div>
  <div class="box box-2">
    <div class="content heading-1 active">
      <p>Content One</p>
    </div>
    <div class="content heading-2">
      <p>Content Two</p>
    </div>
    <div class="content heading-3">
      <p>Content Three</p>
    </div>
    <div class="content heading-4">
      <p>Content Four</p>
    </div>
    <div class="content heading-5">
      <p>Content Five</p>
    </div>
  </div>
</div>

票数 1

Stack Overflow用户

发布于 2020-09-13 23:47:53

你可以按照下面的思路做一些事情：

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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63872545

复制

相似问题

问只显示点击标题的内容，隐藏其他内容
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问只显示点击标题的内容，隐藏其他内容EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问只显示点击标题的内容，隐藏其他内容
EN