Html 加载时在页面上显示分区，但单击时仍可以隐藏？

我在这里是想问一个问题，当页面开始时，已经加载了一个部分，但是以后仍然可以隐藏它。我从一开始就用下面的代码示例隐藏了它：

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/分区

我的代码中的节的示例。

嘿，欢迎来到我的网站！
来看看所有的东西

如果你需要更多的代码/我想要表达的想法，请让我知道。

---

谢谢。

我希望，此代码可以解决您的问题。

：根目录{
--校长：e13470；
--主字体：#ffffff；
--bgcolor:#0c0b10；
--侧导航：#13111b；
--选择颜色：#1f1b2a；
--选择颜色栏：#1f1b2a；
--选择器字体：#e13470；
}
身体{
背景色：var（--bgcolor）；
字体系列：“Iosevka”，佐治亚州，无衬线；
宽度：钙（100%-6em）；
}
部门内容{
填充：0.3雷姆0.9雷姆；
}
h1{
颜色：var（--headerfont）；
字体大小：3rem；
字体风格：斜体；
字体大小：400；
垫顶：4rem；
左：5雷姆；
填充权：18rem；
}
氢{
颜色：var（--headerfont）；
字号：2rem；
字体风格：斜体；
字号：500；
垫面：2rem；
左：5雷姆；
填充权：18rem；
}
h3{
字体大小：32px；
颜色：var（--headerfont）；
字号：500；
}
p{
字体大小：1.6rem；
位置：相对位置；
字号：100；
颜色：var（--mainfont）；
大纲：无；
左：5雷姆；
填充权：18rem；
线高：1.4；
}
.p2{
字体大小：1.7rem；
字号：200；
位置：相对位置；
字体风格：斜体；
颜色：var（--mainfont）；
大纲：无；
线高：1.4；
左：5雷姆；
填充权：18rem；
}
.p3{
字体大小：1.4rem；
字号：200；
位置：相对位置；
字体风格：斜体；
颜色：var（--mainfont）；
大纲：无；
线高：1.4；
左：5雷姆；
填充权：18rem；
}
.违约{
显示：块！重要；
}
部分{
显示：无；
}
章节：目标{
显示：块；
}
.媒体列表{
文本下划线位置：下方；
大纲：无；
}
.淡入{
动画：Fadein2S；
-moz动画：fadein 2s；/*Firefox*/
-webkit动画：fadein 2s；/*Safari和Chrome*/
-o-动画：fadein 2s；/*Opera*/
}
@关键帧淡入淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
身体{
保证金：0；
}
保险商实验室{
列表样式：无；
填充：0；
显示器：flex；
证明内容：之间的空间；
宽度：100%；
}
ulli{
显示：内联块；
弹性基准：33%；
}
ullia{
显示：块；
填充：20px；
背景：#000000；
文本对齐：居中；
字号：1rem；
颜色：#ffffff；
文字装饰：无；
}
.淡入{
高度：300px；
背景：#dddddd；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
字号：1rem；
边框底部：5px实心#333333；
位置：绝对位置；
宽度：100vw；
z指数：0；
}
#主要部分。淡入：第一个孩子{
z指数：1；
}
部分。淡入：目标{
显示器：flex；
z指数：2；
证明内容：中心；
对齐项目：居中；
}
a{
过渡：轻松0.3s，背景色0.3s；
字号：200；
文字装饰：无；
颜色：var（--mainfont）；
大纲：无；
}
a:悬停{
颜色：var（--selectorfont）；
大纲：无；
背景色：var（--selectioncolor）；
}
/*侧边导航菜单*/
.侧导航{
高度：100%；/*100%全高*/
宽度：16雷姆；
位置：固定；/*保持原位*/
z指数：1；/*保持在顶部*/
顶部：0；/*保持在顶部*/
右：0；
溢出：自动；
背景色：var（--sidenav）；
溢出-x:隐藏；/*禁用水平滚动*/
顶部填充物：17rem；
大纲：无；
}
/*导航菜单链接*/
.侧导航a{
填充：1.7rem；
文字装饰：无；
文本对齐：右对齐；
字号：2rem；
颜色：var（--headerfont）；
显示：块；
过渡段：宽度0.4s；
大纲：无；
字号：200；
}
.侧导航a:悬停{
背景色：var（--selectioncolorbar）；
过渡：缓解0.4s；
}
.sidenav a：：之后{
内容：“；
显示：块；
宽度：0；
高度：1px；
过渡：宽度0.4s，背景色0.4s；
位置：绝对位置；
右：0；
背景色：var（--selectioncolorbar）；
}
/*将鼠标悬停在导航链接上时，请更改其颜色*/
.sidenav a:悬停：：之后{
背景色：var（--海德方）；
宽度：70%；
大纲：无；
过渡段：宽度0.4s；
}
@媒体屏幕和屏幕（最大宽度：700px）{
.侧导航{
宽度：97.9vw；
高度：自动；
位置：相对位置；
填充顶部：0；
溢出x：隐藏；
溢出y：隐藏；
}
.sidenav a：：之后{
内容：“；
显示：块；
宽度：0；
高度：1px；
过渡：宽度0.4s，背景色0.4s；
位置：绝对位置；
右：0；
}
/*将鼠标悬停在导航链接上时，请更改其颜色*/
.sidenav a:悬停：：之后{
背景色：var（--Fadingino）；
宽度：0%；
}
.侧导航a{
浮动：左；
}
部门内容{
左边距：0；
}
}
@媒体屏幕和屏幕（最大宽度：400px）{
.侧导航a{
文本对齐：居中；
浮动：无；
溢出x：隐藏；
}
}

文件





嘿，欢迎来到我的网站A！
来看看所有的东西

嘿，欢迎来到我的网站B！
来看看所有的东西

嘿，欢迎来到我的网站C！
来看看所有的东西