html > Div 隱藏應用

※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

語法

<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 平台提供者的附屬廣告

  • 下面都是廣告