Prototype javascript css Tabs

Posted in javascript, prototype, tabs | Saturday, December 29th, 2007 | Trackback

Recently I had to make tabs. Something that has been solved hundreds of times. However I didn’t want to fuck around with a special user interface framework like http://developer.yahoo.com/yui/. Since I use prototype on almost every project since its inception, I decided to just roll out my own solution using the prototype library as a base. It turns out that the implementation was incredibly simple. I have attached a working example for your copy and paste pleasure. The javascript is incredibly simple. The entire javascript programming was less than 25 lines.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var tablinks = null;
var tabcontent = null;
function handletab(event){
	var element = event.element();
	for(i=0;i<tablinks.length;i++){
		var tabli = tablinks[i].up('li');
		if(tablinks[i]==element){
			tabcontent[i].show();
			tabli.removeClassName('deactivetab');
			tabli.addClassName('activetab');
		}else{
			tabcontent[i].hide();
			tabli.removeClassName('activetab');
			tabli.addClassName('deactivetab');
		}
	}
}
function homepageSetup(){
	tablinks = $$('a.tablink');
	tabcontent = $$('div.tabcontent');
	for(i=0;i<tablinks.length;i++){
		tablinks[i].observe('click',handletab);
		tablinks[i].onclick = function(){return false};
	}
}

Prototype javascript css tabs - blowingthroughlines.com

If you find this article and or code useful feel free to leave a comment. I’d love to hear what you think.

Leave a Reply