簡單版:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>div隱藏與顯示</title> <style type=text/css> #menus { background-color: #c4cff0; } </style> <script language=javascript> function Layer_HideOrShow(cur_div) { var current=document.getElementById(cur_div); if(current.style.visibility=="hidden") { current.style.visibility ="visible"; } else { current.style.visibility ="hidden"; } } </script> </head> <body> <p> </p> <table border="0" width="153" cellpadding="0" style="border-collapse: collapse" id="table1" height="101"> <tr> <td> <a href="#" onclick="Layer_HideOrShow('menus');"><img border="0" src="http://www.shuifutour.com/images/456.gif" width="153" height="25"></a></td> </tr> <tr> <td> <div id="menus"> <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse" height="150" id="table2"> <tr> <td> </td> </tr> </table> </div></td> </tr> </table> </body> </html>
高級版:
/* ======================== 函數:顯示或隱藏層 showDiv(divId_array,showLocality_array) 參數說明: divId_array 所有要操作的層ID,用逗號分隔 showLocality_array 所有要顯示的層在參數DivIdArray所對應的位置。為“0”或空時全部顯示,設為負數則全部隱藏。 例如:showDiv('div3,div1,div2','2,3')為顯示第二個(div1)和第三個層(div2),第一個層(div3)將被隱藏。 ======================== */ function showDiv(divId_array,showLocality_array) { var div_array = new Array(); var locality_array = new Array(); var intLocality;//showLocality_array數組長度 var intDiv;//div_array 數組長度 var intTemp = 1;//臨時變量 var intTmp = 1;//臨時變量 //初始化 if (divId_array) { div_array = divId_array.split(","); }else{ intDiv = 0; } if (showLocality_array) { locality_array = showLocality_array.split(","); intLocality = locality_array.length; for (var n = 0;n < intLocality;n++) { intTemp *= locality_array[n]; } if (intTemp <= 0) { intLocality = intTemp; }else{ intLocality = div_array.length; while (intLocality > 0) { intLocality -= 1; document.getElementById(""+ div_array[intLocality] +"").style.display = "none"; } intLocality = 1; } }else{ intLocality = 0; } //顯示指定層 if (intDiv != 0 && intLocality >0) { intDiv = div_array.length; intLocality = locality_array.length; //排序locality_array 數組 for (var n = 0;n < intLocality;n++) { intTemp = locality_array[n]; for (var m = n + 1;m < intLocality;m++) { if (locality_array[n] > locality_array[m]) { locality_array[n] = locality_array[m]; locality_array[m] = intTemp; intTemp = locality_array[n]; } } } intLocality = locality_array.length; intTemp = 0; // while (intTemp < intLocality) { if ((locality_array[intTemp] - 1) < div_array.length) { intTmp = locality_array[intTemp] - 1; document.getElementById(""+ div_array[intTmp] +"").style.display = "block"; } intTemp += 1; } } else if(intLocality == 0) {//顯示所有層 intLocality = div_array.length; while (intLocality > 0) { intLocality -= 1; document.getElementById(""+ div_array[intLocality] +"").style.display = "block"; } }else{//隱藏所有層 intLocality = div_array.length; while (intLocality > 0) { intLocality -= 1; document.getElementById(""+ div_array[intLocality] +"").style.display = "none"; } } }