我在这里讨论的是一个问题，即在页面启动时已经加载了一个部分，但以后仍然可以隐藏它
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>希望这有助于
如果对有任何疑问，请发表评论
我希望，这段代码可以解决您的问题
:root {
--headerfont: #e13470;
--mainfont: #ffffff;
--bgcolor: #0c0b10;
--sidenav: #13111b;
--selectioncolor: #1f1b2a;
--selectioncolorbar: #1f1b2a;
--selectorfont: #e13470;
}
body {
background-color: var(--bgcolor);
font-family: "Iosevka", Georgia, sans-serif;
width: calc(100% - 6em);
}
div.content {
padding: 0.3rem 0.9rem;
}
h1 {
color: var(--headerfont);
font-size: 3rem;
font-style: oblique;
font-weight: 400;
padding-top: 4rem;
padding-left: 5rem;
padding-right: 18rem;
}
h2 {
color: var(--headerfont);
font-size: 2rem;
font-style: oblique;
font-weight: 500;
padding-top: 2rem;
padding-left: 5rem;
padding-right: 18rem;
}
h3 {
font-size: 32px;
color: var(--headerfont);
font-weight: 500;
}
p {
font-size: 1.6rem;
position: relative;
font-weight: 100;
color: var(--mainfont);
outline: none;
padding-left: 5rem;
padding-right: 18rem;
line-height: 1.4;
}
.p2 {
font-size: 1.7rem;
font-weight: 200;
position: relative;
font-style: oblique;
color: var(--mainfont);
outline: none;
line-height: 1.4;
padding-left: 5rem;
padding-right: 18rem;
}
.p3 {
font-size: 1.4rem;
font-weight: 200;
position: relative;
font-style: oblique;
color: var(--mainfont);
outline: none;
line-height: 1.4;
padding-left: 5rem;
padding-right: 18rem;
}
.default {
display: block !important;
}
section {
display: none;
}
section:target {
display: block;
}
.medialist {
text-underline-position: under;
outline: none;
}
.fade-in {
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
body {
margin: 0;
}
ul {
list-style: none;
padding: 0;
display: flex;
justify-content: space-between;
width: 100%;
}
ul li {
display: inline-block;
flex-basis: 33%;
}
ul li a {
display: block;
padding: 20px;
background: #000000;
text-align: center;
font-size: 1rem;
color: #ffffff;
text-decoration: none;
}
.fade-in {
height: 300px;
background: #dddddd;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 1rem;
border-bottom: 5px solid #333333;
position: absolute;
width: 100vw;
z-index: 0;
}
#main section.fade-in:first-child {
z-index: 1;
}
section.fade-in:target {
display: flex;
z-index: 2;
justify-content: center;
align-items: center;
}
a {
transition: ease 0.3s, background-color 0.3s;
font-weight: 200;
text-decoration: none;
color: var(--mainfont);
outline: none;
}
a:hover {
color: var(--selectorfont);
outline: none;
background-color: var(--selectioncolor);
}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 16rem;
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
overflow: auto;
background-color: var(--sidenav);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 17rem;
outline: none;
}
/* The navigation menu links */
.sidenav a {
padding: 1.7rem;
text-decoration: none;
text-align: right;
font-size: 2rem;
color: var(--headerfont);
display: block;
transition: width 0.4s;
outline: none;
font-weight: 200;
}
.sidenav a:hover {
background-color: var(--selectioncolorbar);
transition: ease 0.4s;
}
.sidenav a::after {
content: "";
display: block;
width: 0;
height: 1px;
transition: width 0.4s, background-color 0.4s;
position: absolute;
right: 0;
background-color: var(--selectioncolorbar);
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover::after {
background-color: var(--headerfont);
width: 70%;
outline: none;
transition: width 0.4s;
}
@media screen and (max-width: 700px) {
.sidenav {
width: 97.9vw;
height: auto;
position: relative;
padding-top: 0;
overflow-x: hidden;
overflow-y: hidden;
}
.sidenav a::after {
content: "";
display: block;
width: 0;
height: 1px;
transition: width 0.4s, background-color 0.4s;
position: absolute;
right: 0;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover::after {
background-color: var(--fadinginto);
width: 0%;
}
.sidenav a {
float: left;
}
div.content {
margin-left: 0;
}
}
@media screen and (max-width: 400px) {
.sidenav a {
text-align: center;
float: none;
overflow-x: hidden;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="blah.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li><a href="#a">A</a></li>
<li><a href="#b">B</a></li>
<li><a href="#c">C</a></li>
</ul>
<div id="main">
<section class="fade-in" id="a">
<h1>
Hey, welcome to my site A!
</h1>
<p class=p3>Come take a look to everything!</p>
</section>
<section class="fade-in" id="b">
<h1>
Hey, welcome to my site B!
</h1>
<p class=p3>Come take a look to everything!</p>
</section>
<section class="fade-in" id="c">
<h1>
Hey, welcome to my site C!
</h1>
<p class=p3>Come take a look to everything!</p>
</section>
</div>
</body>
</html>