默认情况下将内容设置为“隐藏”

Question

我想默认将以下内容设置为隐藏。代码工作正常但是当你登陆页面时它会显示所有内容。

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

Answer 1

如果您希望页面加载时ID为list的元素不可见，请在CSS中添加一个条目，将其display属性设置为none。

#list {display:none;}

您还需要添加当前许多CSS规则的对立或补充，如下面的代码段所示：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;