顯示隱藏小代碼

相似控制面板的切換。

1.

2.

3.

3個按鈕，點擊第一個按鈕的時候出來下面的div,而且字體變紅，再點擊一次就消失。字體仍是紅色。知道切換面板，點擊第二個或者第三個按鈕的時候，又變成最開始狀態，div 消失，字體變黑。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

<! DOCTYPE html> < html lang="en">      < head >          < meta charset="utf-8">          < style type="text/css" media="screen">             .change{                 cursor: pointer;                 border:2px solid #000;                 width:120px;                 height:70px;                 margin:5px;                 background:#ccc;                 border-radius:10px;             }            </ style >      </ head >      < body >       < a class="change" id="change" onclick="change('change')">你好</ a >       < a class="change" id="change1" onclick="change('change1')">很差</ a >       < a class="change" id="change2" onclick="change('change2')">好好</ a >       < div id="div1" style="border: 2px solid black;width: 100px;height: 100px; display: none;background:gold;margin-top:5px;border-radius:10px;">       < ul >         < li >心火燒心火燒</ li >         < li >心扉呀</ li >       </ ul >      </ div >       < script type="text/javascript">        function change(id){          var div =document.getElementById("div1");          var a=document.getElementById(id);              if(id=="change" && div.style.display=="none"){                 div.style.display="block";                 a.style.color="red";              }else if(id=="change"&&div.style.display=="block"&&a.style.color=="red"){                 div.style.display="none";                 a.style.color="red";              }else if(id=="change"&&div.style.display=="none"&&a.style.color=="red"){                 div.style.display="block";                 a.style.color="red";              }else if(id!="change"){                 div.style.display="none";                 document.getElementById("change").style.color="black";              }              return false;        }       </ script >      </ body > </ html >

代碼其實仍是有不少重複，可是就是也能夠複用。多添加一個面板，

效果也是同樣的。多加三四五個都沒問題。

這類問題須要注意的是：無論有多少個面板都要記住你須要操做的是哪個，須要分清幾種狀態，而後直接操做此面板