首頁(yè) 猿問(wèn) 讓 div 在 onclick...

讓 div 在 onclick 時(shí)出現(xiàn)在同一位置

Html5

守著一只汪 2024-01-03 15:56:47

我有 4 個(gè)隱藏的部分 div，單擊時(shí)它們應(yīng)該全部顯示在頁(yè)面中央，但是最后一個(gè)顯示得比其他部分更靠下，我知道這是由于彈性框的性質(zhì)造成的，但最好的方法是什么確保它們都出現(xiàn)在完全相同的位置？JS - 另一個(gè)問(wèn)題，這個(gè)腳本...是否有更有效的方法來(lái)編寫它，因?yàn)槲矣X(jué)得它的功能有點(diǎn)麻煩，我只是不確定如何編寫它。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貢獻(xiàn)1719條經(jīng)驗(yàn) 獲得超6個(gè)贊

這是一個(gè)重寫

您想要顯示無(wú)/塊而不是占用空間的可見(jiàn)性

香草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;

}

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 }

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

</header>

<main>

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

</section>

<a href="mailto:macdevh@gmail.com">macdevh@gmail.com</a>

</div>

</section>

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

</div>

</section>

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

}

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 }

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

</header>

<main>

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

</section>

<a href="mailto:macdevh@gmail.com">macdevh@gmail.com</a>

</div>

</section>

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

</div>

</section>

</div>

</section>

</main>

反對(duì) 回復(fù) 2024-01-03

SMILET

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊

我通常使用jQuery和自定義 HTML5 屬性來(lái)實(shí)現(xiàn)這些目的。

在 CSS 中，我創(chuàng)建了一個(gè)名為“hide”的類：

.hide?{?display:?none?!important;?}

在 HTML5 代碼中，您可以為部分包含附加屬性（例如data-toggleable）：

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

然后在 JS 代碼中，您可以使用單個(gè) jQuery 構(gòu)造隱藏將data-toggleable屬性設(shè)置為 true 的所有元素：

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

這一行將找到所有將data-toggleable屬性設(shè)置為“true”的 HTML 元素，并使它們不可見(jiàn)。最棒的是，它不會(huì)兩次分配該類（如果該元素已經(jīng)具有“hide”類，jQuery 將不會(huì)再次分配它）。最后，您可以僅顯示您想要顯示的部分 ID：