Сделать div отображаются в одном и том же месте - PullRequest
Новая
       0

Сделать div отображаются в одном и том же месте

1 голос
/ 17 апреля 2020

У меня есть 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";
  }
}
* {
  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: 20%;
  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;
  }
}
<main>
  <section id="about" style="visibility: hidden;">
    <p>Developer, providing modern and responsive web development.</p>
  </section>
  <section id="contact" style="visibility: hidden;">
    <a href="mailto:macdevh@gmail.com">macdevh@gmail.com</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" style="visibility: hidden;">
    <div class="card">
      <img id="card-img" src="https://via.placeholder.com/150">
      <p id="card-title">Portfolio</p>
    </div>
  </section>
  <section id="blog" style="visibility: hidden;">
    <div class="card">
      <img id="card-img" src="https://via.placeholder.com/150">
      <p id="card-title">Blog</p>
    </div>
  </section>
</main>

Ответы [ 2 ]

0 голосов
/ 17 апреля 2020

Вот переписать

Вы хотите отобразить нет / блок вместо видимости, который занимает место

Ваниль 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:macdevh@gmail.com">macdevh@gmail.com</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:macdevh@gmail.com">macdevh@gmail.com</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>
0 голосов
/ 17 апреля 2020

Я обычно использую jQuery и пользовательские атрибуты HTML5 для этих целей.

В CSS я создаю класс с именем "hide": 

.hide { display: none !important; }

В коде HTML5 вы можете включить дополнительный атрибут (например, data-toggable ) для разделов: 

<section id="work" class="hide" data-toggleable="true">

Затем в коде JS, Вы можете скрыть все элементы с атрибутом data-toggleable , установленным в true, с помощью одной конструкции jQuery: 

$(this).find('[data-toggleable="true"]').addClass('hide');

В этой строке будут найдены все элементы HTML, имеющие атрибут data-toggleable установлен в значение "true" и сделает их невидимыми. Самое замечательное, что он не назначит класс дважды (если элемент уже имеет класс hide, jQuery не назначит его снова). Наконец, вы можете показать только тот идентификатор раздела, который хотите показать: 

$('#work').removeClass('hide');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...