Advanced Search

Return to Snippet

Revision: 3622
at August 23, 2007 11:11 by skatan
Initial Code 
<ul id="tabbed_sub">
	<li><a href="#one">Section 1</a></li>
	<li><a href="#two">Section 2</a></li>

	<li><a href="#three">Section 3</a></li>
	<li><a href="#four">Section 4</a></li>
</ul>

<div id="one">This is the content corresponding to #one</div>
<div id="two">This is the content corresponding to #two</div>
<div id="three">This is the content corresponding to #three</div>
<div id="four">This is the content corresponding to #four</div>

<script type="text/javascript">

	function setLink(i) {
		a[i].onclick = function () {
			div[i].style.display = "block";
			for(var j = 0; j < div.length; j++) {
				if (i != j) {
					div[j].style.display = "none";
				}
			} 
			return false;
		}
	}
	
	function initTabs() {
		var tabs = document.getElementById("tabbed_sub"); // put in id for tabbed list here
		var links = tabs.getElementsByTagName("a");
		div = [];
		a = [];
		
		//Initialize tabs
		for (var i = 0; i < links.length; i++) {
			div[i] = document.getElementById(links[i].href.substr(links[i].href.indexOf("#") + 1));
			if (i != 0) {
				div[i].style.display="none";
			} else { 
				div[i].style.display="block";
			}
			a[i] = links[i];
			setLink(i)
		}
	}
	
var W3CDOM = document.createElement && document.getElementsByTagName;
if(W3CDOM && document.getElementById("tabbed_sub")) { // check W3CDOM compatibility
	initTabs(); 
}
	
</script>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Semantic on page Tabs

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
javascript, html

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
HTML