html - 有没有办法在没有javascript的情况下动态更改内容？

Question

我正在构建一个工作页面，其中有一个部分的内容需要在单击按钮时动态更改。我知道有几种不同的方法可以实现这一点，但它们都涉及某种类型的 javascript。我的能力目前不包括为该站点编写脚本，因此在我通知我的元素经理我们的一个 javascript 人员将不得不处理它之前，我正在研究是否有一种方法可以使用 JUST css 来做到这一点。那么，有谁知道有什么很酷的 CSS 技术可以达到预期的效果吗？

Answer 1

您可能会使用 CSS 的 :target pseudo-class selector .这将需要用 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>