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
Post a Comment