advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

nealwatkins on 07/17/07


Tagged

text tabs


Versions (?)


Who likes this?

2 people have marked this snippet as a favorite

nicolaspar
basicmagic


tabs text

Published in: CSS 

URL: tabs text

tabs text

Plain TextExpand 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html lang="en">
  3.  
  4.  
  5. <style type="text/css">
  6. #tabContainer {width:600px;height:300px;position:relative;border:2px solid gray;}
  7. .pane h2 {float:left;border:2px solid blue;margin:0;padding:0;font-size:20px;cursor:pointer;}
  8. .contents {position:absolute;top:25px;left:0;display:none;}
  9.  
  10. #tabContainer.about #about .contents,
  11. #tabContainer.contact #contact .contents,
  12. #tabContainer.help #help .contents,
  13. #tabContainer.practice #practice .contents
  14.   {display:block;}
  15.  
  16. #tabContainer.about #about h2,
  17. #tabContainer.contact #contact h2,
  18. #tabContainer.help #help h2,
  19. #tabContainer.practice #practice h2
  20.   {border:1px solid red;border-width:2px 2px 0;}
  21. </style>
  22. <script type="text/javascript">
  23.  
  24. function setactive()
  25. {
  26.   var el = this;
  27.   var className = el.parentNode.id;
  28.   el.parentNode.parentNode.className = className;
  29. }
  30.  
  31. window.onload = function()
  32. {
  33.   var titles = document.getElementsByTagName('h2');
  34.   for(var i=0;i<titles.length;i++)
  35.   {
  36.  
  37.     titles[i].onclick = setactive;
  38.   }
  39. }
  40.  
  41. </script>
  42.  
  43.  
  44. </head>
  45. <body>
  46.  
  47.  
  48. <div id="tabContainer">
  49.  
  50.    <div id="about" class="pane">
  51.       <h2>Pre Season</h2>
  52.     <div class="contents">This is pane 1</div>
  53.    </div>
  54.  
  55.    <div id="contact" class="pane">
  56.       <h2>Regular Season</h2>
  57.    <div class="contents">This is pane 2</div>
  58.    </div>
  59.  
  60.    <div id="help" class="pane">
  61.       <h2>Post Season</h2>
  62.       <div class="contents">This is pane 3</div>
  63.    </div>
  64.  
  65.   <div id="practice" class="pane">
  66.       <h2>Practice</h2>
  67.       <div class="contents">This is pane 4</div>
  68.    </div>
  69.  
  70.  
  71. </div>
  72.  
  73. </body>
  74. </html>

Report this snippet 

You need to login to post a comment.