HTML 隱藏與顯示簡例，加詳細註解
阿新 • • 發佈：2018-11-04
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>例項</title> <style type="text/css"> <!-------設定內邊距為0，使body置頂------> /*!important是CSS1就定義的語法，作用是提高指定樣式規則的應用優先權。 語法格式：{ cssRule !important }，即寫在定義的最後面，例如：box{color:red !important;} 在CSS中，通過對某一樣式宣告! important ： 可以更改預設的CSS樣式優先順序規則，使該條樣式屬性宣告具有最高優先順序，也就是相當於寫在最下面。 */ body {padding-top: 0px !important;} </style> </head> <body> <!------------js：改變隱藏、顯示----------------> <script type="text/javascript"> /* 定義函式名字為isHidden,引數為hiddenmenu */ function isHidden(hiddenmenu) { /*新增變數，名為 hMenu，通過id獲取引數*/ var hMenu=document.getElementById(hiddenmenu) /*設定hMenu display屬性： 如果原來是block（顯示），則改為none（隱藏），否則改成block（顯示）。 也可以寫成：hMenu.style.display=(hMenu.style.display=='block')?'none':'block'; 作用是每次點選後改變display的屬性值，從而改變顯示狀態 */ hMenu.style.display=(hMenu.style.display=='none')?'block':'none'; } </script> <!------------------html-------------------> <!--------點選時呼叫isHidden函式，引數為HiddenMenu(隱藏內容的id) --------> <div onclick="isHidden('HiddenMenu')"> <p>點此檢視</p> <!-- 這裡設定id為“HiddenMenu”,初始display的屬性為none，即隱藏，那麼開啟網頁的時候就不顯示 --> <div id="HiddenMenu" style="display: none">隱藏的內容</div> </div> </body> </html>
效果：
點選後：
