让 div 在 onclick 时出现在同一位置

Question

我有 4 个隐藏的部分 div，单击时它们应该全部显示在页面中央，但是最后一个显示得比其他部分更靠下，我知道这是由于弹性框的性质造成的，但最好的方法是什么确保它们都出现在完全相同的位置？

JS - 另一个问题，这个脚本...是否有更有效的方法来编写它，因为我觉得它的功能有点麻烦，我只是不确定如何编写它。

function about() {

  var about = document.getElementById("about");

  var contact = document.getElementById("contact");

  var work = document.getElementById("work");

  var blog = document.getElementById("blog");

  if (about.style.visibility === "hidden") {

    about.style.visibility = "visible";

    contact.style.visibility = "hidden";

    work.style.visibility = "hidden";

    blog.style.visibility = "hidden";

  } else {

    about.style.visibility = "hidden";

  }

}

function contact() {

  var about = document.getElementById("about");

  var contact = document.getElementById("contact");

  var work = document.getElementById("work");

  var blog = document.getElementById("blog");

  if (contact.style.visibility === "hidden") {

    contact.style.visibility = "visible";

    about.style.visibility = "hidden";

    work.style.visibility = "hidden";

    blog.style.visibility = "hidden";

  } else {

    contact.style.visibility = "hidden";

  }

}

function work() {

  var about = document.getElementById("about");

  var contact = document.getElementById("contact");

  var work = document.getElementById("work");

  var blog = document.getElementById("blog");

  if (work.style.visibility === "hidden") {

    work.style.visibility = "visible";

    about.style.visibility = "hidden";

    contact.style.visibility = "hidden";

    blog.style.visibility = "hidden";

  } else {

    work.style.visibility = "hidden";

  }

}

function blog() {

  var about = document.getElementById("about");

  var contact = document.getElementById("contact");

  var work = document.getElementById("work");

  var blog = document.getElementById("blog");

  if (blog.style.visibility === "hidden") {

    blog.style.visibility = "visible";

    about.style.visibility = "hidden";

    contact.style.visibility = "hidden";

    work.style.visibility = "hidden";

  } else {

    blog.style.visibility = "hidden";

  }

}

Answer 1

这是一个重写您想要显示无/块而不是占用空间的可见性香草JSwindow.addEventListener("load",() => {&nbsp; document.querySelector("header").addEventListener("click",(e) => {&nbsp; &nbsp; const tgt = e.target;&nbsp; &nbsp; e.currentTarget.querySelector("a.active").classList.remove("active")&nbsp; &nbsp; tgt.classList.add("active")&nbsp; &nbsp; if (tgt.tagName === "A") {&nbsp; &nbsp; &nbsp; const id = tgt.href.split("#")[1];&nbsp; &nbsp; &nbsp; [...document.querySelectorAll("main section")].forEach(section => {&nbsp; &nbsp; &nbsp; &nbsp; section.classList.toggle("show",section.id === id)&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }&nbsp; });&nbsp; document.querySelector(".active").click()})* {&nbsp; margin: 0;&nbsp; padding: 0;}html {&nbsp; font-size: 100%;}body {&nbsp; height: 100vh;&nbsp; width: 100vw;&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; justify-content: center;&nbsp; align-items: center;}header {&nbsp; position: absolute;&nbsp; top: 5%;&nbsp; width: 100%;&nbsp; display: flex;&nbsp; justify-content: center;}header a {&nbsp; margin: 1rem;}main {&nbsp; width: 100vw;&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; align-items: center;&nbsp; align-items: center;}section {&nbsp; position: static;&nbsp; top: 50%;}@media (min-width: 640px) {&nbsp; body {&nbsp; &nbsp; font-size: 1rem;&nbsp; }}@media (min-width: 960px) {&nbsp; body {&nbsp; &nbsp; font-size: 1.2rem;&nbsp; }}@media (min-width: 1100px) {&nbsp; body {&nbsp; &nbsp; font-size: 1.5rem;&nbsp; }}section { display:none&nbsp; }a { text-decoration:none }.active { text-decoration: underline }.show { display:block }<header><a href="#about" class="active">About</a>&nbsp; &nbsp;<a href="#work">Work</a>&nbsp; <a href="#blog">Blog</a></header><main>&nbsp; <section id="about" >&nbsp; &nbsp; <p>Developer, providing modern and responsive web development.</p>&nbsp; </section>&nbsp; <section id="contact">&nbsp; &nbsp; <a href="mailto:[e-mail]">[e-mail]</a>&nbsp; &nbsp; <div id="social">&nbsp; &nbsp; &nbsp; <a href="https://instagram.com/machooper">I</a>&nbsp; &nbsp; &nbsp; <a href="https://twitter.com/mac_hooper">T</a>&nbsp; &nbsp; &nbsp; <a href="https://gitlab.com/macdevh">G</a>&nbsp; &nbsp; </div>&nbsp; </section>&nbsp; <section id="work">&nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; <img id="card-img" src="https://via.placeholder.com/150">&nbsp; &nbsp; &nbsp; <p id="card-title">Portfolio</p>&nbsp; &nbsp; </div>&nbsp; </section>&nbsp; <section id="blog">&nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; <img id="card-img" src="https://via.placeholder.com/150">&nbsp; &nbsp; &nbsp; <p id="card-title">Blog</p>&nbsp; &nbsp; </div>&nbsp; </section></main>jQuery$(function() {&nbsp; $("header").on("click", "a",function(e) {&nbsp; &nbsp; const $parent = $(this).closest("header");&nbsp; &nbsp; $("a",$parent).removeClass("active")&nbsp; &nbsp; $(this).addClass("active")&nbsp; &nbsp; const id = this.href.split("#")[1];&nbsp; &nbsp; $("main section").each(function()&nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; $(this).toggle(this.id === id)&nbsp; &nbsp; })&nbsp; });&nbsp; $(".active").click()})* {&nbsp; margin: 0;&nbsp; padding: 0;}html {&nbsp; font-size: 100%;}body {&nbsp; height: 100vh;&nbsp; width: 100vw;&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; justify-content: center;&nbsp; align-items: center;}header {&nbsp; position: absolute;&nbsp; top: 5%;&nbsp; width: 100%;&nbsp; display: flex;&nbsp; justify-content: center;}header a {&nbsp; margin: 1rem;}main {&nbsp; width: 100vw;&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; align-items: center;&nbsp; align-items: center;}section {&nbsp; position: static;&nbsp; top: 50%;}@media (min-width: 640px) {&nbsp; body {&nbsp; &nbsp; font-size: 1rem;&nbsp; }}@media (min-width: 960px) {&nbsp; body {&nbsp; &nbsp; font-size: 1.2rem;&nbsp; }}@media (min-width: 1100px) {&nbsp; body {&nbsp; &nbsp; font-size: 1.5rem;&nbsp; }}section { display:none&nbsp; }a { text-decoration:none }.active { text-decoration: underline }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><header><a href="#about" class="active">About</a>&nbsp; &nbsp;<a href="#work">Work</a>&nbsp; <a href="#blog">Blog</a></header><main>&nbsp; <section id="about" >&nbsp; &nbsp; <p>Developer, providing modern and responsive web development.</p>&nbsp; </section>&nbsp; <section id="contact">&nbsp; &nbsp; <a href="mailto:[e-mail]">[e-mail]</a>&nbsp; &nbsp; <div id="social">&nbsp; &nbsp; &nbsp; <a href="https://instagram.com/machooper">I</a>&nbsp; &nbsp; &nbsp; <a href="https://twitter.com/mac_hooper">T</a>&nbsp; &nbsp; &nbsp; <a href="https://gitlab.com/macdevh">G</a>&nbsp; &nbsp; </div>&nbsp; </section>&nbsp; <section id="work">&nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; <img id="card-img" src="https://via.placeholder.com/150">&nbsp; &nbsp; &nbsp; <p id="card-title">Portfolio</p>&nbsp; &nbsp; </div>&nbsp; </section>&nbsp; <section id="blog">&nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; <img id="card-img" src="https://via.placeholder.com/150">&nbsp; &nbsp; &nbsp; <p id="card-title">Blog</p>&nbsp; &nbsp; </div>&nbsp; </section></main>

Answer 2

我通常使用jQuery和自定义 HTML5 属性来实现这些目的。在 CSS 中，我创建了一个名为“hide”的类：.hide { display: none !important; }在 HTML5 代码中，您可以为部分包含附加属性（例如data-toggleable）：<section id="work" class="hide" data-toggleable="true">然后在 JS 代码中，您可以使用单个 jQuery 构造隐藏将data-toggleable属性设置为 true 的所有元素：$(this).find('[data-toggleable="true"]').addClass('hide');这一行将找到所有将data-toggleable属性设置为“true”的 HTML 元素，并使它们不可见。最棒的是，它不会两次分配该类（如果该元素已经具有“hide”类，jQuery 将不会再次分配它）。最后，您可以仅显示您想要显示的部分 ID：$('#work').removeClass('hide');