页面加载时最初显示 div

【问题标题】：Display div initially when page is loaded页面加载时最初显示 div
【发布时间】：2015-09-03 19:19:27
【问题描述】：

我需要在 html 页面中使用两个链接按钮在学生和教职员工 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>

【问题讨论】：

标签： html css

【解决方案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？

【讨论】：