advanced code snippet search

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

Expand | Embed | Plain Text 
  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.