html - 短/详细按钮

Question

如何实现“简短”和“详细”两个按钮？ “短”应该是默认值，并显示页面的一个版本。单击“详细”按钮后，应显示该页面的另一个版本。

由于这有点难以解释，或许可以看下面的例子。

示例页面:

• 别管内容
• 需要javascript
• > https://www.klimafakten.de/behauptungen/behauptung-aber-am-suedpol-nimmt-die-eismasse-zu
• 向下滚动一点。
• 选中按钮“Kurz”(简称)和“Ausführlich”(代表详细)。

要求:

• 不会完全使内容在没有 javascript 的情况下无法访问(当 noscript 被激活时)
• 适用于主要的现代浏览器

理想情况下:

• 在没有 javascript 的情况下工作(当 noscript 被激活时)

Answer 1

可以使用Css来实现显示隐藏内容。 Css 有一个名为 display 的属性可以设置为无或阻止。我们可以使用焦点来检测元素上的点击。下面只是一个虚拟示例。您可以尝试实现相同的目标。

CSS

body { display: block;}
.span3:focus ~ .alert { display: none;}
.span2:focus ~ .alert { display: block;}
.alert{display:none;}


HTML

<span class="span3" tabindex="0">Short</span>
<span class="span2" tabindex="0">Detailed</span>
<p class="alert" >This is hidden</p>

请检查jsfiddle https://jsfiddle.net/nnodjtf2/