Javascript 单击时使div显示在同一位置

我有4个隐藏的分区，当单击时，它们都应该显示在页面的中心，但是最后一个分区显示的位置比其他分区更靠下，我知道这是由于flex box的性质，但最好的办法是确保它们都显示在完全相同的位置

JS-另一个问题，这个脚本。。。有没有一种更有效的方式来写它，因为我觉得它做的事情有点麻烦，我只是不知道该怎么写

函数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=“可见”；
contact.style.visibility=“隐藏”；
work.style.visibility=“隐藏”；
blog.style.visibility=“隐藏”；
}否则{
about.style.visibility=“hidden”；
}
}
功能联系人（）{
var about=document.getElementById（“about”）；
var contact=document.getElementById（“contact”）；
var work=document.getElementById（“work”）；
var blog=document.getElementById（“blog”）；
如果（contact.style.visibility==“隐藏”）{
contact.style.visibility=“可见”；
about.style.visibility=“hidden”；
work.style.visibility=“隐藏”；
blog.style.visibility=“隐藏”；
}否则{
contact.style.visibility=“隐藏”；
}
}
职能工作（）{
var about=document.getElementById（“about”）；
var contact=document.getElementById（“contact”）；
var work=document.getElementById（“work”）；
var blog=document.getElementById（“blog”）；
如果（work.style.visibility==“隐藏”）{
work.style.visibility=“可见”；
about.style.visibility=“hidden”；
contact.style.visibility=“隐藏”；
blog.style.visibility=“隐藏”；
}否则{
work.style.visibility=“隐藏”；
}
}
函数blog（）{
var about=document.getElementById（“about”）；
var contact=document.getElementById（“contact”）；
var work=document.getElementById（“work”）；
var blog=document.getElementById（“blog”）；
如果（blog.style.visibility==“隐藏”）{
blog.style.visibility=“可见”；
about.style.visibility=“hidden”；
contact.style.visibility=“隐藏”；
work.style.visibility=“隐藏”；
}否则{
blog.style.visibility=“隐藏”；
}
}

*{
保证金：0；
填充：0；
}
html{
字体大小：100%；
}
身体{
高度：100vh；
宽度：100vw；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
标题{
位置：绝对位置；
最高：20%；
宽度：100%；
显示器：flex；
证明内容：中心；
}
标题a{
保证金：1rem；
}
主要{
宽度：100vw；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
对齐项目：居中；
}
部分{
位置：静态；
最高：50%；
}
@介质（最小宽度：640像素）{
身体{
字号：1rem；
}
}
@介质（最小宽度：960像素）{
身体{
字号：1.2rem；
}
}
@介质（最小宽度：1100px）{
身体{
字体大小：1.5rem；
}
}

开发人员，提供现代化和快速响应的web开发

组合
博客

我通常使用和自定义HTML5属性来实现这些目的

在CSS中，我创建了一个名为“hide”的类：

在HTML5代码中，您可以为以下部分添加附加属性（例如数据可切换性）：

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

这一行将查找所有将数据可切换属性设置为“true”的HTML元素，并使它们不可见。最棒的是它不会两次分配类（如果元素已经有了类“hide”，jQuery将不会再次分配它）。最后，您只能显示要显示的节ID：

$('#work').removeClass('hide');

我通常使用和自定义HTML5属性来实现这些目的

在CSS中，我创建了一个名为“hide”的类：

在HTML5代码中，您可以为以下部分添加附加属性（例如数据可切换性）：

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

这一行将查找所有将数据可切换属性设置为“true”的HTML元素，并使它们不可见。最棒的是它不会两次分配类（如果元素已经有了类“hide”，jQuery将不会再次分配它）。最后，您只能显示要显示的节ID：

$('#work').removeClass('hide');

这里有一个重写

您希望显示无/块，而不是占用空间的可见性

香草JS

window.addEventListener（“加载”，（）=>{
document.querySelector（“标题”）.addEventListener（“单击”，（e）=>{
常数tgt=e.target；
e、 currentTarget.querySelector（“a.active”）.classList.remove（“active”）
tgt.classList.add（“活动”）
如果（tgt.tagName==“A”）{
const id=tgt.href.split（“#”）[1]；
[…document.queryselectoral（“主节”）].forEach（节=>{
section.classList.toggle（“显示”，section.id==id）
})
}
});
document.querySelector（“.active”）。单击（）
})

*{
保证金：0；
填充：0；
}
html{
字体大小：100%；
}
身体{
高度：100vh；
宽度：100vw；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
标题{
位置：绝对位置；
最高：5%；
宽度：100%；
显示器：flex；
证明内容：中心；
}
标题a{
保证金：1rem；
}
主要{
宽度：100vw；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
对齐项目：居中；
}
部分{
位置：静态；
最高：50%；
}
@介质（最小宽度：640像素）{
身体{
字号：1rem；
}
}
@介质（最小宽度：960像素）{
身体{
字号：1.2rem；
}
}
@介质（最小宽度：1100px）{
身体{
字体大小：1.5rem；
}
}
节{显示：无}
a{文本装饰：无}
.active{te