Created
August 21, 2013 15:46
-
-
Save Shaun2D2/6296191 to your computer and use it in GitHub Desktop.
Tabs written in pure javascript and CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Untitled Document</title> | |
<style> | |
body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; } | |
ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; } | |
ul#tabs li { display: inline; } | |
ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; } | |
ul#tabs li a:hover { background-color: #f1f0ee; } | |
ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; } | |
div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; } | |
div.tabContent.hide { display: none; } | |
</style> | |
</head> | |
<body onload="init()"> | |
<ul id="tabs"> | |
<li><a href="#tab1">Tab 1</a></li> | |
<li><a href="#tab2">Tab 2</a></li> | |
</ul> | |
<div class="tabContent" id="tab1"> | |
<h2>Tab 1</h2> | |
<div> | |
<p>This is tab 1</p> | |
<p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p> | |
</div> | |
</div> | |
<div class="tabContent" id="tab2"> | |
<h2>Tab 2</h2> | |
<div> | |
<p>This is tab 2</p> | |
<p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p> | |
</div> | |
</div> | |
<script> | |
var tabLinks = new Array(); | |
var contentDivs = new Array(); | |
function init() { | |
// Grab the tab links and content divs from the page | |
var tabListItems = document.getElementById('tabs').childNodes; | |
for ( var i = 0; i < tabListItems.length; i++ ) { | |
if ( tabListItems[i].nodeName == "LI" ) { | |
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' ); | |
var id = getHash( tabLink.getAttribute('href') ); | |
tabLinks[id] = tabLink; | |
contentDivs[id] = document.getElementById( id ); | |
} | |
} | |
// Assign onclick events to the tab links, and | |
// highlight the first tab | |
var i = 0; | |
for ( var id in tabLinks ) { | |
tabLinks[id].onclick = showTab; | |
tabLinks[id].onfocus = function() { this.blur() }; | |
if ( i == 0 ) tabLinks[id].className = 'selected'; | |
i++; | |
} | |
// Hide all content divs except the first | |
var i = 0; | |
for ( var id in contentDivs ) { | |
if ( i != 0 ) contentDivs[id].className = 'tabContent hide'; | |
i++; | |
} | |
} | |
function showTab() { | |
var selectedId = getHash( this.getAttribute('href') ); | |
// Highlight the selected tab, and dim all others. | |
// Also show the selected content div, and hide all others. | |
for ( var id in contentDivs ) { | |
if ( id == selectedId ) { | |
tabLinks[id].className = 'selected'; | |
contentDivs[id].className = 'tabContent'; | |
} else { | |
tabLinks[id].className = ''; | |
contentDivs[id].className = 'tabContent hide'; | |
} | |
} | |
// Stop the browser following the link | |
return false; | |
} | |
function getFirstChildWithTagName( element, tagName ) { | |
for ( var i = 0; i < element.childNodes.length; i++ ) { | |
if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i]; | |
} | |
} | |
function getHash( url ) { | |
var hashPos = url.lastIndexOf ( '#' ); | |
return url.substring( hashPos + 1 ); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi, I'm getting this error: (index):188 Uncaught TypeError: Cannot read property 'lastIndexOf' of null