有没有办法动态更改内容没有JavaScript？

Question

我正在构建一个工作页面,其中有一个部分,其中内容需要在按钮单击时动态更改.我知道有几种不同的方法可以实现这一点,但所有这些方法都涉及到某种类型的javascript.我的功能目前不包括为这个站点编写脚本所以我正在研究是否有办法用JUST css做这个,然后我通知我的项目经理我们的一个javascript人员将不得不处理它.那么,任何人都知道任何可能获得预期效果的很酷的CSS技术吗？

Answer 1

你可能会使用CSS的:target伪类选择器.这需要用a元素替换按钮,这会导致文档的URL应用与id要更改的元素的属性相关的哈希.

div {
  display: none;
}

:target {
  display: block;
}

<a href="#foo">Click here to show the hidden <code>div</code> element</a><br>
<a href="#">Click here to hide it again</a>.
<div id="foo">This should only show when the link is clicked.</div>

Answer 2

是的，您可以在没有任何脚本语言的情况下使用动态内容，但您的选择非常有限。正如 James 所建议的，你可以使用 CSS。一种常见的方法是使用复选框和标签来控制项目的可见性。您可以用它来制作简单的游戏、选项卡菜单等等。

http://css-tricks.com/the-checkbox-hack/上有一个很棒的教程，其中包含您可以尝试的示例，但本质上，您需要执行以下操作：（来自教程）

input[type=checkbox]:checked ~ div {
   background: red;
}

请注意，在此示例中您有 :checked 属性和常规同级选择器。你可以变得更加复杂。

查看使用相同功能的CSS Panic游戏。