我需要在 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>
最佳答案
您的默认面板应该出现在 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
?
关于html - 加载页面时最初显示 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32383802/