Advanced Search

Semantic on page Tabs

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <ul id="tabbed_sub">
  2. 	<li><a href="#one">Section 1</a></li>
  3. 	<li><a href="#two">Section 2</a></li>
  4.  
  5. 	<li><a href="#three">Section 3</a></li>
  6. 	<li><a href="#four">Section 4</a></li>
  7. </ul>
  8.  
  9. <div id="one">This is the content corresponding to #one</div>
  10. <div id="two">This is the content corresponding to #two</div>
  11. <div id="three">This is the content corresponding to #three</div>
  12. <div id="four">This is the content corresponding to #four</div>
  13.  
  14. <script type="text/javascript">
  15.  
  16. 	function setLink(i) {
  17. 		a[i].onclick = function () {
  18. 			div[i].style.display = "block";
  19. 			for(var j = 0; j < div.length; j++) {
  20. 				if (i != j) {
  21. 					div[j].style.display = "none";
  22. 				}
  23. 			} 
  24. 			return false;
  25. 		}
  26. 	}
  27.  
  28. 	function initTabs() {
  29. 		var tabs = document.getElementById("tabbed_sub"); // put in id for tabbed list here
  30. 		var links = tabs.getElementsByTagName("a");
  31. 		div = [];
  32. 		a = [];
  33.  
  34. 		//Initialize tabs
  35. 		for (var i = 0; i < links.length; i++) {
  36. 			div[i] = document.getElementById(links[i].href.substr(links[i].href.indexOf("#") + 1));
  37. 			if (i != 0) {
  38. 				div[i].style.display="none";
  39. 			} else { 
  40. 				div[i].style.display="block";
  41. 			}
  42. 			a[i] = links[i];
  43. 			setLink(i)
  44. 		}
  45. 	}
  46.  
  47. var W3CDOM = document.createElement && document.getElementsByTagName;
  48. if(W3CDOM && document.getElementById("tabbed_sub")) { // check W3CDOM compatibility
  49. 	initTabs(); 
  50. }
  51.  
  52. </script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.