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的最后。创建规则以默认显示最后一个面板。创建规则以隐藏最后一个面板，当它是目标面板的兄弟时。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

归功于this answer这个想法。

顺便说一句，为什么您使用position: absolute和margin: 150%来隐藏面板而不是非常简单的display: none？

最初在加载页面时显示div

1 个答案: