Skip to content

Instantly share code, notes, and snippets.

@Munter
Created July 8, 2011 12:47
Show Gist options
  • Save Munter/1071740 to your computer and use it in GitHub Desktop.
Save Munter/1071740 to your computer and use it in GitHub Desktop.
Simple javascript tab implementation
function Tabs(tabContainer) {
this.tabs = [];
var tablinks = tabContainer.getElementsByTagName('a');
for (var i = 0; i < tablinks.length; i++) {
this.tabs.push(new Tab(tablinks[i], this));
}
if (!this.active) {
this.activate(this.tabs[0]);
}
}
Tabs.prototype = {
activate : function(newActiveTab) {
if (this.active) {
this.active.setInactive();
}
this.active = newActiveTab;
this.active.setActive();
}
}
function Tab(anchor, parent) {
var me = this;
me.link = anchor;
me.content = document.getElementById(me.link.href.split('#')[1]);
me.setInactive();
me.link.onmousedown = function() {
parent.activate(me);
};
me.link.onclick = function (e) {
return false;
};
}
Tab.prototype = {
setActive : function() {
this.link.parentNode.className += ' active';
this.content.style.display = '';
},
setInactive : function() {
this.link.parentNode.className = this.link.parentNode.className.replace(/ *active/,'');
this.content.style.display = 'none';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment