DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Semantic On Page Tabs

07.05.2011
| 1756 views |
  • submit to reddit
        // Semantic on page Tabs

<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>