短/詳細按鈕

Question

如何實現「短」和「詳細」兩個按鈕？ 「short」應該是默認值，並顯示一個版本的頁面。點擊「詳細」按鈕後，應顯示另一版本的頁面。

由於這有點難以解釋，請參閱下面的示例。

示例頁面：

• 心中永遠的內容
• 需要javscript
• https://www.klimafakten.de/behauptungen/behauptung-aber-am-suedpol-nimmt-die-eismasse-zu
• 向下滾動了一下。
• 檢查按鈕「Kurz」（簡稱）和「Ausführlich」（代表詳細）。

要求：

• 不能完全使內容無法訪問，而不使用Javascript（而無腳本被激活）
• 作品在各大主流瀏覽器

理想：

• 沒有JavaScript的作品（而noscript是acti vated）

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/