Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

117 рядки
2.8KB

  1. var tabLinks = new Array();
  2. var contentDivs = new Array();
  3. function init()
  4. {
  5. // Grab the tab links and content divs from the page
  6. var tabListItems = document.getElementById('tabs').childNodes;
  7. console.log(tabListItems);
  8. for (var i = 0; i < tabListItems.length; i ++)
  9. {
  10. if (tabListItems[i].nodeName == "LI")
  11. {
  12. var tabLink = getFirstChildWithTagName(tabListItems[i], 'A');
  13. var id = getHash(tabLink.getAttribute('href'));
  14. tabLinks[id] = tabLink;
  15. contentDivs[id] = document.getElementById(id);
  16. }
  17. }
  18. // Assign onclick events to the tab links, and
  19. // highlight the first tab
  20. var i = 0;
  21. for (var id in tabLinks)
  22. {
  23. tabLinks[id].onclick = showTab;
  24. tabLinks[id].onfocus = function () {
  25. this.blur()
  26. };
  27. if (i == 0)
  28. {
  29. tabLinks[id].className = 'active';
  30. }
  31. i ++;
  32. }
  33. // Hide all content divs except the first
  34. var i = 0;
  35. for (var id in contentDivs)
  36. {
  37. if (i != 0)
  38. {
  39. console.log(contentDivs[id]);
  40. contentDivs[id].className = 'content hide';
  41. }
  42. i ++;
  43. }
  44. }
  45. function showTab()
  46. {
  47. var selectedId = getHash(this.getAttribute('href'));
  48. // Highlight the selected tab, and dim all others.
  49. // Also show the selected content div, and hide all others.
  50. for (var id in contentDivs)
  51. {
  52. if (id == selectedId)
  53. {
  54. tabLinks[id].className = 'active';
  55. contentDivs[id].className = 'content';
  56. }
  57. else
  58. {
  59. tabLinks[id].className = '';
  60. contentDivs[id].className = 'content hide';
  61. }
  62. }
  63. // Stop the browser following the link
  64. return false;
  65. }
  66. function getFirstChildWithTagName(element, tagName)
  67. {
  68. for (var i = 0; i < element.childNodes.length; i ++)
  69. {
  70. if (element.childNodes[i].nodeName == tagName)
  71. {
  72. return element.childNodes[i];
  73. }
  74. }
  75. }
  76. function getHash(url)
  77. {
  78. var hashPos = url.lastIndexOf('#');
  79. return url.substring(hashPos + 1);
  80. }
  81. function toggle(elem)
  82. {
  83. elem = document.getElementById(elem);
  84. if (elem.style && elem.style['display'])
  85. {
  86. // Only works with the "style" attr
  87. var disp = elem.style['display'];
  88. }
  89. else if (elem.currentStyle)
  90. {
  91. // For MSIE, naturally
  92. var disp = elem.currentStyle['display'];
  93. }
  94. else if (window.getComputedStyle)
  95. {
  96. // For most other browsers
  97. var disp = document.defaultView.getComputedStyle(elem, null).getPropertyValue('display');
  98. }
  99. // Toggle the state of the "display" style
  100. elem.style.display = disp == 'block' ? 'none' : 'block';
  101. return false;
  102. }