我有 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"; }}
2 回答
慕侠2389804
TA贡献1719条经验 获得超6个赞
这是一个重写
您想要显示无/块而不是占用空间的可见性
香草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>
SMILET
TA贡献1796条经验 获得超4个赞
我通常使用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');- 2 回答
- 0 关注
- 40 浏览
添加回答
举报
0/150
提交
取消