這個栗子……
可以不吃，先預設一個變量表示div的狀態，例子中0是顯示的，一開始是隱藏的。當點擊時判斷狀態是顯示0的還是隱藏1的；如果是顯示的就把div隱藏，再把變量改變為1。再次點擊時把會判斷到變量是隱藏的，就會走顯示那條路。
<!-- Author: XiaoWen Create a file: 2016-12-07 10:09:27 Last modified: 2016-12-07 10:21:28 Start to work: Finish the work: Other information: --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>點擊顯示和隱藏</title> <style> div{ width: 100px; height: 100px; background: #eee; } </style> </head> <body> <button> 顯示/隱藏 </button> <div>受罪的div，想隱藏就隱藏</div> <script> var but=document.getElementsByTagName("button"); var div=document.getElementsByTagName("div"); var temp=0; //0為顯示 but[0].onclick=function(){ if(temp==0){ //本來是顯示的，所以就隱藏咯 div[0].style="display:none"; temp=1; //隱藏了就把狀態改變了 }else{ div[0].style="display:block"; temp=0; } } </script> </body> </html>
w3c上有個開關燈的例子，是直接判斷src路徑中的字符來顯示不同的圖片。
使用取余 %
var but=document.getElementsByTagName("button"); var div=document.getElementsByTagName("div"); var temp=0; //0為顯示 but[0].onclick=function(){ if(temp%2==0){ //本來是顯示的，所以就隱藏咯 div[0].style="display:none"; }else{ div[0].style="display:block"; } temp++ }
使用布爾和非
var but=document.getElementsByTagName("button"); var div=document.getElementsByTagName("div"); var b=true; but[0].onclick=function(){ if(b){ div[0].style="display:none"; }else{ div[0].style="display:block"; } b=!b //把 true 變為 false 並賦給原來的變量 }
期待此栗子的更有味的做法。
相似例子：
勾選時顯示相應內容：http://www.cnblogs.com/daysme/articles/6140303.html