我有 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:[email protected]">[email protected]</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:[email protected]">[email protected]</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 關注
- 169 瀏覽
添加回答
舉報
0/150
提交
取消