我想默认将以下内容设置为隐藏。代码工作正常但是当你登陆页面时它会显示所有内容。
.show {
display: none;
}
.hide:focus+.show {
display: inline;
}
.hide:focus {
display: none;
}
.hide:focus~#list {
display: none;
}
@media print {
.hide,
.show {
display: none;
}
}
<p>Click below to learn how to access LearnHub and the services available to employees.</p>
<div>
<a href="#" class="hide">[hide]</a>
<a href="#" class="show">[show]</a>
<ol id="list">
<p>
<h2>How to access LearnHub</h2>
<p>1. Click on the LearnHub button under ‘Business Systems' on the Intranet home page.</p>
</ol>
</div>
答案 0 :(得分:1)
如果您希望页面加载时ID为list
的元素不可见,请在CSS中添加一个条目,将其display
属性设置为none
。
#list {display:none;}
您还需要添加当前许多CSS规则的对立或补充,如下面的代码段所示:
#list {
display: none;
}
.hide {
display: none;
}
.show:focus+.hide {
display: inline;
}
.show:focus {
display: none;
}
.show:focus~#list {
display: inline;
}
.hide:focus+.show {
display: inline;
}
.hide:focus {
display: none;
}
.hide:focus~#list {
display: none;
}
&#13;
<div>
<a href="#" class="show">[show]</a>
<a href="#" class="hide">[hide]</a>
<ol id="list">
<p>
<h2>How to access LearnHub</h2>
<p>1. Click on the LearnHub button under ‘Business Systems' on the Intranet home page.</p>
</ol>
</div>
&#13;