Posted By

MMDeveloper on 09/18/08


Tagged

javascript class simple tabs


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

Ashung
smallarmsdealer


Simple Javascript Tabs, Standalone OOP


 / Published in: JavaScript
 

URL: http://www.mechanicmatt.com

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Simple Tabs</title>
  6. <script type="text/javascript">
  7. <!--
  8.  
  9.  
  10. var tabsClass = {
  11. tabSetArray: new Array(),
  12. classOn: "tabs_on",
  13. classOff: "tabs_off",
  14.  
  15. addTabs: function (tabsContainer) {
  16. tabs = document.getElementById(tabsContainer).getElementsByTagName("div");
  17. for (x in tabs) {
  18. if (typeof(tabs[x].id) != "undefined") {
  19. this.tabSetArray.push(tabs[x].id);
  20. } else {}
  21. }
  22. },
  23.  
  24. switchTab: function (element) {
  25. for (x in this.tabSetArray) {
  26. tabItem = this.tabSetArray[x];
  27. dataElement = document.getElementById(tabItem + "_data");
  28. if (dataElement) {
  29. if (dataElement.style.display != "none") {
  30. dataElement.style.display = "none";
  31. } else {}
  32. } else {}
  33.  
  34. tabElement = document.getElementById(tabItem);
  35. if (tabElement) {
  36. if (tabElement.className != this.classOff) {
  37. tabElement.className = this.classOff;
  38. } else {}
  39. } else {}
  40. }
  41.  
  42. document.getElementById(element.id + "_data").style.display = "";
  43. element.className = this.classOn;
  44. }
  45. };
  46.  
  47. -->
  48. </script>
  49.  
  50. <style type="text/css">
  51. <!--
  52. .tab_content {
  53. border: 1px solid #669CCC;
  54. padding-bottom: 15px;
  55. }
  56.  
  57. #tabContainer {
  58. padding-bottom: 0px;
  59. margin-bottom: 0px;
  60. display: block;
  61. }
  62.  
  63. #tabContainer div {
  64. padding-bottom: 5px;
  65. padding-right: 8px;
  66. padding-left: 8px;
  67. font-weight: bold;
  68. margin-left: 5px;
  69. padding-top: 5px;
  70. color: #000000;
  71. float: left;
  72. }
  73.  
  74. #tabContainer .tabs_on, #tabContainer .tabs_off {
  75. border-bottom-color: #669CCC;
  76. border-right-color: #669CCC;
  77. background-position: bottom;
  78. border-left-color: #669CCC;
  79. border-bottom-style: solid;
  80. background-color: #EFEFEF;
  81. border-right-style: solid;
  82. border-top-color: #669CCC;
  83. border-left-style: solid;
  84. border-bottom-width: 0px;
  85. border-right-width: 1px;
  86. border-top-style: solid;
  87. border-left-width: 1px;
  88. border-top-width: 1px;
  89. cursor: pointer;
  90. }
  91. #tabContainer .tabs_on {
  92. background-color: #BBBBBB;
  93. }
  94. -->
  95. </style>
  96. </head>
  97. <body>
  98. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  99. <tr>
  100. <td><div id="tabContainer">
  101. <div id="tab_1" class="tabs_on" onclick="tabsClass.switchTab(this);">General Information</div>
  102. <div id="tab_2" class="tabs_off" onclick="tabsClass.switchTab(this);">Demographics</div>
  103. <div id="tab_3" class="tabs_off" onclick="tabsClass.switchTab(this);">Education</div>
  104. <div id="tab_4" class="tabs_off" onclick="tabsClass.switchTab(this);">Experience</div>
  105. </div></td>
  106. </tr>
  107. <tr>
  108. <td><div id="tab_1_data" class="tab_content">
  109. tab 1 content
  110. </div>
  111. <div id="tab_2_data" class="tab_content" style="display: none;">
  112. tab 2 content
  113. </div>
  114. <div id="tab_3_data" class="tab_content" style="display: none;">
  115. tab 3 content
  116. </div>
  117. <div id="tab_4_data" class="tab_content" style="display: none;">
  118. tab 4 content
  119. </div>
  120. <script type="text/javascript">
  121. <!--
  122. tabsClass.addTabs("tabContainer");
  123. -->
  124. </script>
  125. </td>
  126. </tr>
  127. </table>
  128. </body>
  129. </html>

Report this snippet  

You need to login to post a comment.