DHTML Tabs
Reformats a structured HTML page with tabs for each section.
1 2 <html> 3 <head> 4 <script type="text/javascript"> 5 TAB_HEADINGS = 'h2'; 6 TAB_CLASS = 'tab'; 7 SECTION_CLASS = 'section'; 8 QUERY_SECTION_ARG = 'section'; 9 TAB_SELECTED_CLASS = 'selected'; 10 TAB_NOT_SELECTED_CLASS = 'not-selected'; 11 LOADING_ELM_ID = 'loading'; 12 CONTENT_HOLDER_ID = 'content-holder'; 13 14 lastSection = 0 15 function checkHash() { 16 var section = get_selected(); 17 if(section != lastSection) { 18 show_section(section); 19 lastSection = section; 20 } 21 } 22 23 function get_elements() { 24 var divs = document.getElementsByTagName("div"); 25 var htags = document.getElementsByTagName(TAB_HEADINGS); 26 sections = []; 27 tabs = []; 28 headings = [] 29 for(var i=0; i<divs.length; i++) { 30 if(divs[i].className == SECTION_CLASS) sections.push(divs[i]); 31 } 32 for(var i=0; i<htags.length; i++) { 33 if(htags[i].className == TAB_CLASS) { 34 var span = document.createElement("span"); 35 span.innerHTML = htags[i].innerHTML; 36 tabs.push(span); 37 headings.push(htags[i]); 38 } 39 } 40 }; 41 42 function combine_tabs(){ 43 if(headings.length == 0)return; 44 headings[0].innerHTML = ''; 45 for(var i=0; i<tabs.length; i++) { 46 // headings[i].removeChild(tabs[i]); 47 headings[0].appendChild(tabs[i]); 48 if(i > 0) headings[i].parentNode.removeChild(headings[i]); 49 } 50 }; 51 52 function hide_all(){ 53 for(var i=0; i<sections.length; i++) { 54 sections[i].style.display = "none"; 55 } 56 for(var i=0; i<tabs.length; i++) { 57 tabs[i].className = TAB_NOT_SELECTED_CLASS 58 } 59 }; 60 61 function show_section(index){ 62 hide_all() 63 if(sections.length == 0) return; 64 var section = sections[index]; 65 if(!section) var section = sections[index=0]; 66 section.style.display = "block"; 67 tabs[index].className = TAB_SELECTED_CLASS; 68 var id = headings[index].getAttribute('id') || sections[index].getAttribute('id'); 69 if(id && index != lastSection) { 70 var y = typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement.scrollTop; 71 if(!navigator.userAgent.match(/Safari/)) location.hash = '#' + id; 72 window.scrollTo(0, y); 73 if(typeof load_tab == 'function') load_tab(id); 74 } 75 lastSection = index; 76 }; 77 78 function tab_click(e){ 79 var target = e && e.target || event.srcElement; 80 for(var i=0; i<tabs.length; i++) { 81 if(target == tabs[i] || target.parentNode == tabs[i]){ 82 show_section(i); 83 } 84 } 85 }; 86 87 function set_handlers(){ 88 for(var i=0; i<tabs.length; i++) { 89 tabs[i].onclick = tab_click; 90 } 91 }; 92 93 function get_selected(){ 94 var selected = 0; 95 if(location.hash) { 96 selected = location.hash.substring(1); 97 } else if(location.search) { 98 var args = location.search.substring(1).split('&'); 99 for(var i=0; i<args.length; i++) { 100 var name = args[i].split('=')[0]; 101 var value = args[i].split('=')[1]; 102 if(name == QUERY_SECTION_ARG){ 103 selected = value; 104 break; 105 } 106 } 107 } 108 if(isNaN(selected)){ 109 for(var i=0; i<sections.length; i++){ 110 if(sections[i].getAttribute('id') == selected || headings[i].getAttribute('id') == selected){ 111 selected = i; 112 break; 113 } 114 } 115 } 116 return selected; 117 }; 118 119 function set_up() { 120 get_elements(); 121 combine_tabs(); 122 var loadingElm = document.getElementById(LOADING_ELM_ID); 123 if(loadingElm){ 124 loadingElm.style.display = "none"; 125 } 126 var contentHolderElm = document.getElementById(CONTENT_HOLDER_ID); 127 if(contentHolderElm) { 128 contentHolderElm.style.display = "block"; 129 } 130 var selected = get_selected(); 131 show_section(selected); 132 set_handlers(); 133 if(!navigator.userAgent.match(/Safari/)) setInterval(checkHash, 100); 134 }; 135 136 onload = set_up 137 </script> 138 <style type="text/css"> 139 h2.tab span { 140 margin-left: 9px; 141 margin-right: 0px; 142 padding: 1px 10px 0px 10px; 143 border-left: 1px solid #ccc; 144 border-top: 1px solid #ccc; 145 border-right: 1px solid #ccc; 146 cursor: pointer; 147 /* Remove the following if you don't want rounded corners (Mozilla only). */ 148 -moz-border-radius: 7px 7px 0px 0px; 149 } 150 151 h2.tab span.not-selected { 152 background-color: #eee; 153 border-bottom: 1px solid #ccc; 154 color: #999; 155 } 156 157 h2.tab span.selected { 158 background-color: #fff; 159 border-bottom: 1px solid #fff; 160 } 161 162 h2.tab { 163 border-bottom: none; 164 font-weight: bold; 165 font-size: 100%; 166 margin-bottom: 0px; 167 font-style: normal; 168 } 169 170 div.section { 171 border: 1px solid #ccc; 172 padding: 15px 5px 5px 5px; 173 } 174 </style> 175 </head> 176 <body> 177 <h2 class="tab" id="tab1">Tab 1</h2> 178 <div class="section"> 179 content for first tab 180 </div> 181 182 <h2 class="tab" id="tab2">Tab 2</h2> 183 <div class="section"> 184 content for second tab 185 </div> 186 187 <!-- 188 You'll notice that each section heading has an "id" attribute. 189 You'll also notice clicking on each tab changes part of the URL to 190 the id of the tab you clicked. This allows the Back button to work 191 in Mozilla-based browsers (an Internet Explorer bug prevents it 192 from working), and for proper links directly to a specific tab. 193 For example, #tab2 appended to the URL will cause the second 194 tab to be selected when the page loads. 195 --> 196 </body> 197 </html>
