搜尋此網誌

2013年3月2日 星期六

網頁動態選單製作

利用css的display屬性, 達成動態隱藏或展示選單的效果
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <style>  
 #child {  
      display: none;  
 }  
 </style>  
 <script type="text/javascript">  
      function changeChildStatus() {  
           var childUl = document.getElementById('child');  
           if(childUl.style.display == 'block'){  
                childUl.style.display = 'none'  
           }else{  
                childUl.style.display = 'block'  
           }  
      }  
 </script>  
 </head>  
 <body>  
      <ul id="parent">  
           <li>child:  
                <ul id="child">  
                     <li>apple</li>  
                     <li>kiwi</li>  
                </ul>  
           </li>  
           <li>banana</li>  
           <li>tomato</li>  
      </ul>  
      <button type="button" onclick="changeChildStatus()">hide/show child</button>  
 </body>  
 </html>  

沒有留言:

張貼留言