html - 加载页面时最初显示 div

Question

我需要在 html 页面中使用两个链接按钮在学生和教职工 div 之间切换(即页面中只应显示一个 div，单击按钮时将隐藏其他 div)。

问题是代码仅在单击按钮时有效，并且当页面最初加载时没有显示 div 并且页面为空白。我想在页面加载时默认显示学生 div，然后根据单击的按钮在学生和教职员工 div 之间切换。

如何使用 HTML 和 CSS 实现这一目标？

.panel {
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: -150%;
    position: absolute;
    background: #000;
    color: #fff;
    box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
    z-index: 2;
}
.panel:target {
    position: relative;         
    margin-top: 0%;
    background-color: black;
}

<a href="#student">Students</a>
<a href="#staff">Staffs</a>
<div id="student" class="panel">
student content
</div>
<div id="staff" class="panel">
staff content
</div>

Answer 1

您的默认面板应该出现在 HTML 的最后。创建一个规则以默认显示最后一个面板。创建规则以隐藏最后一个面板，当它是目标面板的兄弟时。

.panel, .panel:target ~ #student {
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: -150%;
    position: absolute;
    background: #000;
    color: #fff;
    box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
    z-index: 2;
}
.panel:target, #student {
    position: relative;         
    margin-top: 0%;
    background-color: black;
}

<a href="#student">Students</a>
<a href="#staff">Staffs</a>
<div id="staff" class="panel">
staff content
</div>
<div id="student" class="panel">
student content
</div>

归功于 this answer为了这个想法。

---

顺便问一下，为什么要使用 position: absolute 和 margin: 150% 来隐藏面板而不是非常简单的 display: none?