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

Question

我正在构建一个工作页面，其中有一个部分的内容需要在单击按钮时动态更改。我知道有几种不同的方法可以完成此操作，但所有方法都涉及 javascript 某种形式。我的能力目前不包括为这个网站编写脚本，所以我正在研究是否有办法用 JUST css 来做到这一点，然后我通知我的项目经理我们 javascript 的一个人会必须处理它。那么，有人知道有什么很酷的 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>

Answer 2

我认为没有什么办法可以直接用CSS修改内容，因为顾名思义，它是专门针对样式的。我不知道有什么技巧，抱歉。我不认为 CSS 实际上是一个合适的方法来做到这一点，因为它不是好的代码组织（尽管 web 并不以良好的代码组织而闻名）。敲出 javascript 应该非常简单，所以我建议尽可能自己动手。按下按钮更改内容确实不是一个困难的 javascript 问题。加入一些 jquery，您也可以获得流畅的过渡。

HTML 并不是设计成动态的，它或多或少只是一种文档格式。我也不认为 CSS 是为动态设计的，只是在某些事件上改变了样式。所以我认为因为改变内容并没有改变风格，所以它要么不可能，要么不是一种非常漂亮的方式。

祝你好运！

Answer 3

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

http://css-tricks.com/the-checkbox-hack/ 提供了一个很棒的示例教程，您可以在 http://css-tricks.com/the-checkbox-hack/ 上进行尝试，但实际上，您可以这样做：（来自教程）

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

请注意，您在此示例中使用了 :checked 属性和通用兄弟选择器。你可以变得更加复杂。

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

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

Is there a way to dynamically change content without javascript?

html

css

dynamic