Proto.Tabs

//= require "http://gist.github.com/66568"
//= require "http://gist.github.com/162593"

<div class="tab-panel">
	<nav class="tabs">
		<ul>
			<li href="#sect-1" tagindex="1">tab 1</li>
			<li href="#sect-2" tagindex="2">tab 2</li>
			<li href="#sect-3" tagindex="3">tab 3</li>
		</ul>
	</nav>
	<section id="sect-1"></section>
	<section id="sect-2" style="display:none;"></section>
	<section id="sect-3" style="display:none;></section>
</div>

<script>
document.delegate('nav.tabs li', 'focus:in', function(e){
	e.stop();
	this.siblings().invoke("removeClassName", "selected");
	this.addClassName("selected");

	var target = $(this.href.substring(this.href.indexOf("#") + 1));
	if (target){
		target.siblings().invoke("hide");
		target.show();
	}
});
</script>