JS导航条显隐例子

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< script  language ="javascript" > ...
  function fn(num)...{
    var i;
    for(i=1;i<=5;i++)...{
      var divtar=document.getElementById("div"+i);
      var buttontar=document.getElementById("button"+i);
      if(num==i)...{
        divtar.style.display="";
      }else...{
        divtar.style.display="none";
      }
    }
  }
</ script >
< title > 无标题文档 </ title >
</ head >

< body >
< p > &nbsp; </ p >
< p > &nbsp; </ p >
< div  id ="div1"   > div1 </ div >
< div  id ="div2"  style ="display:none" > div2 </ div >
< div  id ="div3"  style ="display:none" > div3 </ div >
< div  id ="div4"  style ="display:none" > div4 </ div >
< div  id ="div5"  style ="display:none" > div5 </ div >
< p >
   < input  type ="submit"  name ="button"  id ="button1"  value ="button1"  onclick ="fn(1)"   />
</ p >
< p >
   < input  type ="submit"  name ="button2"  id ="button2"  value ="button2"   onclick ="fn(2)" />
</ p >
< p >
   < input  type ="submit"  name ="button3"  id ="button3"  value ="button3"  onclick ="fn(3)" />
</ p >
< p >
   < input  type ="submit"  name ="button4"  id ="button4"  value ="button4"  onclick ="fn(4)" />
</ p >
< p >
   < input  type ="submit"  name ="button5"  id ="button5"  value ="button5"  onclick ="fn(5)"   />
</ p >
</ body >
</ html >

转至 http://blog.youkuaiyun.com/daryl715/archive/2008/05/16/2451498.aspx