JS控制DIV顯示或隱藏函數


 簡單版:

<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";
  }
 }
}

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM