学习javascript的时候,自己动手做了一个javascript应用:伸缩的导航。

主要知识点:获取触发事件句柄的元素,比如<div id='div1', World</div>,当触发onclick事件时要获取该事件的元素,要用到'target'属性,像这样:event.target。而ie中要用'srcElement'属性获取触发该事件的元素。

js代码:

  1. //<![CDATA[ 
  2.             var slider = false
  3.             var num; 
  4.             window.onload = function(){ 
  5.                 document.getElementById('elements1').style.display = 'none'
  6.                 document.getElementById('elements2').style.display = 'none'
  7.                 for(var i=1 ; i<=2; i++){ 
  8.                     document.getElementById('label'+i).onclick = showHideSlide; 
  9.                 } 
  10.             } 
  11.              
  12.             //响应click的事件句柄 
  13.              
  14.             function showHideSlide(evnt){ 
  15.                 var theEvent = evnt ? evnt : window.event; 
  16.                 var theSrc = theEvent.target ? theEvent.target : theEvent.srcElement; 
  17.                 var item = 'elements'+theSrc.id.substr(5,1); 
  18.                 var toggleNav = document.getElementById(item); 
  19.                 if(slider == false){ 
  20.                     toggleNav.style.display = 'block'
  21.                     slider = true
  22.                 }else
  23.                     toggleNav.style.display = 'none'
  24.                     slider = false
  25.                 } 
  26.             } 
  27.              
  28.              
  29.         //]]> 

html:

  1. <div id="label1" class="label"> 
  2.     Name 
  3. </div> 
  4. <div class="elements" id="elements1"> 
  5.     <label>First Name:</label><br /><input type="text" name="firstname" /><br /><br /> 
  6.     <label>Last Name:</label><br /><input type="text" name="lastname" /><br /><br />     
  7. </div> 
  8. <div id="label2" class="label"> 
  9.     Address 
  10. </div> 
  11. <div class="elements" id="elements2"> 
  12.     <label>Address</label><br /><input type="text" name="address"><br /><br /> 
  13. </div>