Show - hide tabs, need some extra functionality

[satsilem]

I have found this script at:
http://bonrouge.com/~switchcontent3

it is really working nice for my needs, and is quite simple especially for some one that has absolutely no idea about javascript.

The script is actually a tab system when you click in one of the "buttons" the specified tag is opening.

I need just some more functionality: to assign at the selected button a class="selected" in order to style the selected tab differently,

So I really tried some different ways (please don't laugh I am new to this part), but until my copy of "The JavaScript Anthology" is here I have to finalize this

so the javascript is :


function hidestories() {
var divs=document.getElementById('stories').getElementsByTagName('div');
for (j=0; j<divs.length; j++) {
var rE = new RegExp("(^|\\s)" + 'story' + "(\\s|$)");
if (rE.test(divs[j].className)) {
divs[j].style.display="none";
}
}
}

function stories(first) {
var thebuttons=document.getElementById('thebuttons').getElementsByTagName('a');
for (i=0; i<thebuttons.length; i++) {
thebuttons[i].onclick=function() {
hidestories();
var thestory=(this.href).split("#",2)[1];
document.getElementById(thestory).style.display="block";
return false;
}
}
if (first) {
var firstone=document.getElementById('stories').firstChild;
if (firstone.nodeType != 1) {firstone = firstone.nextSibling;}
firstone.style.display="block";
}
}
window.onload=function() {
hidestories();
stories(1);
}

and the html is

<ul id="thebuttons">
<li><a href="#storyA">Story A</a></li>
<li><a href="#storyB">Story B</a></li>
</ul>
<div id="stories">
<div id="storyA" class="story">
here goes the content of tab a
</div>
<div id="storyB" class="story">
here goes the content of tab b
</div>
</div>


Thanks in advance for your help

[SimplyFu]

have you check out how yahoo ui implement their tabbing system, you can even add your own callback function. It is quite handy anc configurable. I suggest you might want to use yui for your experiment.