Semantic on page Tabs


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



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.  

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.