html - Show/Hide javascript query -


i made html test website test show/hide javascript.

when load page, show first page in website hidden 'till click on button'.

<html>     <head><title>test</title>         <script>                 function toggle(target){                  var artz = document.getelementsbyclassname('article');                 var targ = document.getelementbyid(target);                   var isvis = targ.style.display=='block';                  for(var i=0;i<artz.length;i++){                  artz[i].style.display = 'none';                 }                  targ.style.display = isvis?'none':'block';                  return false;                 }         </script>     </head>     <body>         <a href="#" onclick="toggle('about');">about us</a>         <a href="#" onclick="toggle('contact');">contact</a>         <a href="#" onclick="toggle('products');">products</a>          <div class="article" id="about" style="display:none;">about page...</div>         <div class="article" id="contact" style="display:none;">contact page...</div>         <div class="article" id="products" style="display:none;">products page...</div>     </body> </html> 

well, that's because elements hidden , toggle-function invoked on click.

use this:

window.onload = function(){   toggle('about'); //or whichever page you'd show on startup } 

this function invoked on page-load , calls toggle-function, providing content shoud shown.

alternatively, change style="display:none;" style="display:block;" in html content should shown on page-load.


Comments

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

jquery - Set jPicker field to empty value -

.htaccess - htaccess convert request to clean url and add slash at the end of the url -