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

【问题标题】：Is there a way to dynamically change content without javascript?有没有办法在没有 javascript 的情况下动态更改内容？
【发布时间】：2015-03-05 23:19:11
【问题描述】：

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

【问题讨论】：

标签： html css dynamic

【解决方案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>

【讨论】：

谢谢，这很漂亮（虽然 CSS 不是我在正常工作环境中使用此功能的首选，但它仍然是一个注意的好方法）

【解决方案2】：

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

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

祝你好运！

【讨论】：

我 %100 同意这不是正确的做法，这更多是为了原型、交互式样机之类的东西、烟雾和镜子等。尽管如前 2 个回复中所述，但似乎有一些不错的技巧。我试图避免使用 javascript 的原因不是因为我不知道如何使用它，而是因为我工作的公司对个人拥有的编辑能力类型非常严格，而且他们不希望添加任何脚本（即使是少量）也不会通过 js 家伙，所以我只是看看是否有办法在没有 js 的情况下做到这一点
听起来不错。你让我有点担心，我现在感觉好多了！

【解决方案3】：

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

http://css-tricks.com/the-checkbox-hack/ 是一个很棒的教程，其中包含您可以尝试的示例，但本质上，您会做这样的事情：（来自教程）

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

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

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

【讨论】：