Question

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

Answer 1

您可以使用CSS :target pseudo-class selector。这需要使用a元素替换您的按钮，这会导致您的文档的网址应用与您要更改的元素的id属性相关的哈希值。

＆＃13;

div {
  display: none;
}

:target {
  display: block;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

一个很好的教程，你可以尝试的例子是http://css-tricks.com/the-checkbox-hack/，但实质上，你会做这样的事情:(来自教程）

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

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

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

Answer 3

我认为没有任何方法可以直接使用CSS修改内容，因为顾名思义，它专门用于样式。对不起，我不知道有什么伎俩。我认为CSS实际上并不是一种合适的方法，因为它不是一个好的代码组织（尽管Web并不以良好的代码组织而闻名）。敲打javascript应该非常简单，所以我建议你尽可能自己做。使用按钮更改内容确实不是一个困难的JavaScript问题。抛出一些jquery，你也可以获得光滑的过渡。

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

祝你好运！

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

3 个答案: