Question

我已经看过许多做示意/隐藏的CSS3示例，但我不想再隐藏隐藏的div，只需要一个“显示”链接，点击后显示隐藏的div并隐藏“显示”链接。我已经看到了一些使用输入按钮完成的好黑客，我该如何使用这种显示隐藏内容的特定方法？

Answer 1

实现此目的的一种方法是使用:target伪选择器，非常简单的例子：

<style>
    #state_b { display: none; }
    #state_b:target { display: block; }
    #state_b:target + a { display: none; }
</style>
<div id=state_b>hello world</div>
<a href=#state_b>show</a>

您可以使用此技术更改状态，但是您无法在同一页面上拥有多个此类框。

JSFiddle example

Answer 2

之前在input和:checked伪类的帮助下评论过，对于年轻的浏览器： DEMO

HTML基础

<div>
  <input id="hidiv" type="checkbox" value=""/> 
  <label for="hidiv" > Show more </label>
  <div class="toshow">div to show </div>
</div>

CSS基础

#hidiv {
  position:absolute;
  left:-9999px;
}
label  {/* for demo , style with link defaut style */
    display:inline-block;
  color:blue;
  text-decoration:underline;
  cursor:pointer;
}
.toshow ,
#hidiv:checked + label {
  display:none; /* once input checked, you cannot checked it anymore via the click */
}
#hidiv:checked ~ .toshow {
  display:block;
}

您可以拥有多个框，每个框都有自己的输入和标签。

CSS-only显示隐藏的div，隐藏＆＃34; show＆＃34;链接显示隐藏的div

2 个答案: