我在这里讨论一个问题，即页面启动时已经加载了一个部分，但稍后仍然可以隐藏它。我从一开始就隐藏了它，示例代码如下:
section {
display: none;
}
我用 :target 重新启用它，如下所示:
section:target {
display: block;
}
为了更改部分和显示的内容，我为字母 a 到 c 设置了 id，并使用我使用的目标启用它们 href:
<div id="sidenav" class="sidenav">
<a href="#a">About</a>
<a href="#b">Works</a>
<a href="#c">Contact</a>
</div>
是否可以加载部分a，但仍然能够单击并转换到另一个 id/部分？
我的代码中的部分示例。
<section class="fade-in" id="a">
<h1>
Hey, welcome to my site!
</h1>
<p class=p3>Come take a look to everything!</p>
</section>
如果您需要更多代码/了解我想要表达的内容，请告诉我。 谢谢。
最佳答案
还没有设计它。别介意。 😊
let sidenav = document.querySelector('#sidenav')
let def = document.querySelector('#a')
sidenav.addEventListener('click', () => {
def.classList.remove('default')
}).default {
display: block !important;
}
section {
display: none;
}
section:target {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="sidenav" class="sidenav">
<a href="#a">About</a>
<a href="#b">Works</a>
<a href="#c">Contact</a>
</div>
<section class="fade-in default" id="a">
<h1>
Hey, welcome to my site!
</h1>
<p class=p3>Come take a look to everything!</p>
</section>
<section class="fade-in" id="b">
<h1>
this is another something
</h1>
<p class=p3>Lorem ipsum dolor sit amet.</p>
</section>
<section class="fade-in" id="c">
<h1>
Another sample stuff
</h1>
<p class=p3>Lorem ipsum dolor sit amet😊</p>
</section>
</body>
</html>希望这有帮助
如有疑问请评论
关于html - 加载时显示页面上的某个部分，但单击时仍然能够隐藏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61598561/