javascript伸縮Navを実現

8985 ワード

JavaScript js。 div タージ

javascriptを勉強する時、自分でjavascript応用を作りました.伸び縮みのナビゲーションです.
主な知識点:トリガイベントの要素を取得します.例えば

は、onclickイベントをトリガする時にこのイベントの要素を取得します.'target'属性を使用します.このように:event.target.ieでは、「srcellment」属性でイベントをトリガする要素を取得します.
jsコード:


  
  
  
  
   
   
   
   //<![CDATA[ 
   
   
   
               var slider = false; 
   
   
   
               var num; 
   
   
   
               window.onload = function(){ 
   
   
   
                   document.getElementById('elements1').style.display = 'none'; 
   
   
   
                   document.getElementById('elements2').style.display = 'none'; 
   
   
   
                   for(var i=1 ; i<=2; i++){ 
   
   
   
                       document.getElementById('label'+i).onclick = showHideSlide; 
   
   
   
                   } 
   
   
   
               } 
   
   
   
                
   
   
   
               //  click      
   
   
   
                
   
   
   
               function showHideSlide(evnt){ 
   
   
   
                   var theEvent = evnt ? evnt : window.event; 
   
   
   
                   var theSrc = theEvent.target ? theEvent.target : theEvent.srcElement; 
   
   
   
                   var item = 'elements'+theSrc.id.substr(5,1); 
   
   
   
                   var toggleNav = document.getElementById(item); 
   
   
   
                   if(slider == false){ 
   
   
   
                       toggleNav.style.display = 'block'; 
   
   
   
                       slider = true; 
   
   
   
                   }else{ 
   
   
   
                       toggleNav.style.display = 'none'; 
   
   
   
                       slider = false; 
   
   
   
                   } 
   
   
   
               } 
   
   
   
                
   
   
   
                
   
   
   
           //]]>

html数:


  
  
  
  
   
   
   
   <div id="label1" class="label"> 
   
   
   
       Name 
   
   
   
   </div> 
   
   
   
   <div class="elements" id="elements1"> 
   
   
   
       <label>First Name:</label><br /><input type="text" name="firstname" /><br /><br /> 
   
   
   
       <label>Last Name:</label><br /><input type="text" name="lastname" /><br /><br />     
   
   
   
   </div> 
   
   
   
   <div id="label2" class="label"> 
   
   
   
       Address 
   
   
   
   </div> 
   
   
   
   <div class="elements" id="elements2"> 
   
   
   
       <label>Address</label><br /><input type="text" name="address"><br /><br /> 
   
   
   
   </div>

【JavaScript】------JavaScriptファイルサイズ変換、バイトはK、M、G、T単位に変換する