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

  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.