隐藏仅显示CSS的显示内容列表，不使用JavaScript

一尘不染

隐藏仅显示CSS的显示内容列表，不使用JavaScript

css

我一直在寻找一个很好的技巧，使隐藏/显示内容或仅具有CSS而没有javascript的列表。我已成功执行此操作：

<!DOCTYPE html>
<head>

   <style>
      #cont {display: none; }
      .show:focus + .hide {display: inline; }
      .show:focus + .hide + #cont {display: block;}
   </style>

</head>
<body>

   <div>
        <a href="#show"class="show">[Show]</a>
        <a href="#hide"class="hide">/ [Hide]</a>
        <div id="cont">Content</div>
   </div>

</body>
</html>

并且它正在工作，但没有达到应有的效果。这是问题所在：显示内容时，您可以通过单击“页面上的任何位置”将其隐藏。如何禁用它？如何通过单击“隐藏”隐藏内容“仅”？先感谢您！

阅读 267

2020-05-16

共1个答案

一尘不染

我不会使用复选框，而是使用您已经拥有的代码

CSS

body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert{display:none;}

HTML

<span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert" >Some alarming information here</p>

这样，仅在单击hide元素时隐藏文本

2020-05-16