html > Div 隱藏應用

語法

<acronym title="隱藏開關">
<a style="cursor:pointer" alt="隱藏開關" onclick="if (document.getElementById(hide_msg).style.display!='none'){document.getElementById(hide_msg).style.display='none';this.style.color='blue';}else{document.getElementById(hide_msg).style.display='block';this.style.color='#E1E1E1';};">★ 開啟隱藏內容 ★</a>
</acronym>
<div id="hide_msg" style="display:none">隱藏內容</div>

簡要說明

跟 document.getElementById(hide_msg) 裡面的「hide_msg」要一致才有單一對應效果。
「<div id="hide_msg" style="display:none">隱藏內容</div>」裡面「style="display:none"」表示這個 Div 預設為一開始就隱型。
「if (document.getElementById(hide_msg).style.display!='none')」＝「判斷只要目前目標 Div(hide_msg) 不是隱藏就…」
<acronym> 標籤是用來標明敘述，功能跟「alt="隱藏開關"」一樣。因為非 IE 瀏覽器可能不支援「alt="隱藏開關"」只支援「<acronym> 標籤」，所以多加這個標籤保證達到提示效果。
開關核心在「<a onclick="～～">」～～裡面的那一長串，以下分別說明。
1. 先將「onclick=""」裡面的內容展開來看
```
if {document.getElementById(hide_msg).style.display!='none')
{
    document.getElementById(hide_msg).style.display='none';
    this.style.color='blue';
}
else
{
    document.getElementById(hide_msg).style.display='block';
    this.style.color='#E1E1E1';
};
```
2. 你可以很清楚的看到「if…else…」，這部分寫在 onclick 表示「當你按下去的時候他會做上面這些動作」。而執行內容是使用「javascript」來寫。
3. 接著，把上面那串代表的意義用中文敘述。相信會更容易明白那串到哪裡是什麼動作。
```
如果 {名為 hide_msg 的 Div 沒有隱藏的話就執行下面｛｝內容，否則執行否則下的｛｝內容)
{
    讓名為 hide_msg 的 Div 隱形;
    這串按鈕文字本身變成藍色（color='blue'）;
}
否則
{
    名為 hide_msg 的 Div  解除隱藏;
    這串按鈕文字本身變成 #E1E1E1 顏色;
};
```
4. 所以是事先判斷目前隱藏區隱藏了沒？
  之後再動作要解除隱藏，然後按紐文字變色成 #E1E1E1；
  或讓沒隱藏的部份藏起來，並把這個按鈕文字顏色變為藍色。
「a style="cursor:pointer"」的部份是為了突顯那串文字有開關功能，也就是滑鼠移到那段按鈕文字上，就會變成手指頭的樣式。
「hide_msg」可以自行命名成其他任何名稱，但請記得要跟「onclick」的內容一起改，全都要改成一致的名稱才能對應開關效果。