使用CSS和JS在HTML中使用onClick事件顯示隱藏內容

Question

起初，我想隱藏所有身體並只顯示一個圖像，但是由於使用display來隱藏身體，這似乎是不可能的：沒有人會隱藏所有的孩子。 因此，我將代碼更改為僅隱藏要隱藏的參數。

在底線：單擊隱藏的內容時，我想顯示隱藏的內容。

這是我的HTML代碼在這里輸入圖像描述 js代碼在這里輸入圖像描述最后css代碼在這里輸入圖像描述

即使代碼看起來也很簡單，但我很掙扎：單擊圖像時，什么都沒有發生。

如果問題的措辭不夠完善，我絕對感到抱歉，這是我關於stackoverflow的第一個問題，我很高興將其弄清楚。 預先感謝。

Answer 1

您在JS中出錯，必須使用引號。

... .style.display = "block";

Answer 2

 <html> <head> <style> p { display: none; } </style> </head> <body> <p>This is some random text</p> <img id="click" src="" width="500px" height="500px"> <script> var toggle = document.getElementById("click"); toggle.addEventListener("click", show); function show() { var p = document.getElementsByTagName("p")[0].style.display = "block"; } </script> </body> </html>

Answer 3

謝謝大家的支持！ 我已經找到答案了。 我遇到了getElementsByTagName和getElementsByClassName的一些問題，因為您實際上必須使用for循環來顯示所有元素。 因此，我只使用了getElementById並在HTML代碼中使用了“ onclick”事件。 謝謝！

使用CSS和JS在HTML中使用onClick事件顯示隱藏內容

問題描述

3 個解決方案

解決方案1
1 2019-01-26 13:09:01

解決方案2
0 2019-01-26 13:38:01

解決方案3
0 已采納 2019-01-29 18:31:23

使用CSS和JS在HTML中使用onClick事件顯示隱藏內容

問題描述

3 個解決方案

解決方案1 1 2019-01-26 13:09:01

解決方案2 0 2019-01-26 13:38:01

解決方案3 0 已采納 2019-01-29 18:31:23

解決方案1
1 2019-01-26 13:09:01

解決方案2
0 2019-01-26 13:38:01

解決方案3
0 已采納 2019-01-29 18:31:23