让 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

这是一个重写

您想要显示无/块而不是占用空间的可见性

香草JS

window.addEventListener("load",() => {

  document.querySelector("header").addEventListener("click",(e) => {

    const tgt = e.target;

    e.currentTarget.querySelector("a.active").classList.remove("active")

    tgt.classList.add("active")

    if (tgt.tagName === "A") {

      const id = tgt.href.split("#")[1];

      [...document.querySelectorAll("main section")].forEach(section => {

        section.classList.toggle("show",section.id === id)

      })

    }

  });

  document.querySelector(".active").click()

})

* {

  margin: 0;

  padding: 0;

}

html {

  font-size: 100%;

}

body {

  height: 100vh;

  width: 100vw;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}

header {

  position: absolute;

  top: 5%;

  width: 100%;

  display: flex;

  justify-content: center;

}

header a {

  margin: 1rem;

}

main {

  width: 100vw;

  display: flex;

  flex-direction: column;

  align-items: center;

  align-items: center;

}

section {

  position: static;

  top: 50%;

}

@media (min-width: 640px) {

  body {

    font-size: 1rem;

  }

}

@media (min-width: 960px) {

  body {

    font-size: 1.2rem;

  }

}

@media (min-width: 1100px) {

  body {

    font-size: 1.5rem;

  }

}

section { display:none  }

a { text-decoration:none }

.active { text-decoration: underline }

.show { display:block }

<header>

<a href="#about" class="active">About</a>   <a href="#work">Work</a>  <a href="#blog">Blog</a>

</header>

<main>

  <section id="about" >

    <p>Developer, providing modern and responsive web development.</p>

  </section>

  <section id="contact">

    <a href="mailto:[e-mail]">[e-mail]</a>

    <div id="social">

      <a href="https://instagram.com/machooper">I</a>

      <a href="https://twitter.com/mac_hooper">T</a>

      <a href="https://gitlab.com/macdevh">G</a>

    </div>

  </section>

  <section id="work">

    <div class="card">

      <img id="card-img" src="https://via.placeholder.com/150">

      <p id="card-title">Portfolio</p>

    </div>

  </section>

  <section id="blog">

    <div class="card">

      <img id="card-img" src="https://via.placeholder.com/150">

      <p id="card-title">Blog</p>

    </div>

  </section>

</main>

jQuery

$(function() {

  $("header").on("click", "a",function(e) {

    const $parent = $(this).closest("header");

    $("a",$parent).removeClass("active")

    $(this).addClass("active")

    const id = this.href.split("#")[1];

    $("main section").each(function()  {

        $(this).toggle(this.id === id)

    })

  });

  $(".active").click()

})

* {

  margin: 0;

  padding: 0;

}

html {

  font-size: 100%;

}

body {

  height: 100vh;

  width: 100vw;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}

header {

  position: absolute;

  top: 5%;

  width: 100%;

  display: flex;

  justify-content: center;

}

header a {

  margin: 1rem;

}

main {

  width: 100vw;

  display: flex;

  flex-direction: column;

  align-items: center;

  align-items: center;

}

section {

  position: static;

  top: 50%;

}

@media (min-width: 640px) {

  body {

    font-size: 1rem;

  }

}

@media (min-width: 960px) {

  body {

    font-size: 1.2rem;

  }

}

@media (min-width: 1100px) {

  body {

    font-size: 1.5rem;

  }

}

section { display:none  }

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>   <a href="#work">Work</a>  <a href="#blog">Blog</a>

</header>

<main>

  <section id="about" >

    <p>Developer, providing modern and responsive web development.</p>

  </section>

  <section id="contact">

    <a href="mailto:[e-mail]">[e-mail]</a>

    <div id="social">

      <a href="https://instagram.com/machooper">I</a>

      <a href="https://twitter.com/mac_hooper">T</a>

      <a href="https://gitlab.com/macdevh">G</a>

    </div>

  </section>

  <section id="work">

    <div class="card">

      <img id="card-img" src="https://via.placeholder.com/150">

      <p id="card-title">Portfolio</p>

    </div>

  </section>

  <section id="blog">

    <div class="card">

      <img id="card-img" src="https://via.placeholder.com/150">

      <p id="card-title">Blog</p>

    </div>

  </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');