Tabs

Proto.Tabs.js

<div class="tab-panel">
	<nav class="tabs">
		<ul>
			<li href="#sect-1">tab 1</li>
			<li href="#sect-2">tab 2</li>
			<li href="#sect-3">tab 3</li>
		</ul>
	</nav>
	<section id="sect-1"></section>
	<section id="sect-2"></section>
	<section id="sect-3"></section>
</div>

<script>
$$("nav.tabs li").each(function(tab) {
	tab.observe("click", function(event) {
		Event.stop(event);
		tab.addClassName("selected").siblings().invoke("removeClassName", "selected");
		var target = $(tab.href.substring(tab.href.indexOf("#") + 1));
		if (target) {
			target.show().siblings().slice(0).invoke("hide");
		}
	});
});
</script>