实现javascript伸缩Nav

学习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>
 

补充：web前端 , JavaScript ,

上一个：实现javascript拖放应用
下一个：用jquery验证用户名是否有效或重复