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>

簡要說明

1. 跟 document.getElementById(hide_msg) 裡面的「hide_msg」要一致才有單一對應效果。
2. 「<div id="hide_msg" style="display:none">隱藏內容</div>」裡面「style="display:none"」表示這個 Div 預設為一開始就隱型。
3. 「if (document.getElementById(hide_msg).style.display!='none')」＝「判斷只要目前目標 Div(hide_msg) 不是隱藏就…」
4. <acronym> 標籤是用來標明敘述，功能跟「alt="隱藏開關"」一樣。因為非 IE 瀏覽器可能不支援「alt="隱藏開關"」只支援「<acronym> 標籤」，所以多加這個標籤保證達到提示效果。
5. 開關核心在「<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；
      或讓沒隱藏的部份藏起來，並把這個按鈕文字顏色變為藍色。
6. 「a style="cursor:pointer"」的部份是為了突顯那串文字有開關功能，也就是滑鼠移到那段按鈕文字上，就會變成手指頭的樣式。
7. 「hide_msg」可以自行命名成其他任何名稱，但請記得要跟「onclick」的內容一起改，全都要改成一致的名稱才能對應開關效果。

以下是 @Wiki 平台提供者的附屬廣告

• 下面都是廣告