JS tabs not working in IE

[crobar]

i attempted to make tabs in JavaScript and it works in fire fox & safari, but not IE...
the basic function works (switching content) but the tabs don't reset just change on click... Example (http://www.staticair.com/EX/tabs.html)

<script type="text/javascript">
function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
//-------
function collapseAll(objs) {
var i;
for (i=0;i<objs.length;i++ ) {
objs[i].style.display = 'none';
}
}
//-------
function switchTab(obj) {
//------- list all tab content div ids in collapseAll.
collapseAll($('one','two','three','four','five'));
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
//-------
function changer(obj,DivID) {
switchTab(DivID);
var lnks = document.getElementById("tabs").getElementsByTagName("a");
var lnkamnt = lnks.length+1;
for (var i = 0; i <= lnkamnt; i++) {
if (lnks[i].getAttribute('class') == "active") {
lnks[i].className = "inactive";
}
obj.className = "active";
}
}
//-------
function pageLoad() {
//------- collapseAll if you dont want any tabs open.
//collapseAll($('one','two','three','four','five'));
//------- set switch tab to your inital tab.(also set this tab class to active)
switchTab('one')
}
</script>


i don't write JavaScript too often so my script could be a complete mess and i wouldn't know.
I'm not sure what to do here any help here would be greatly appreciated.

Thanks

[Kor]

The problem could be here:

if (lnks[i].getAttribute('class') == "active") {

IE has it's own way to deal with class and it does not consider class as a normal HTML attribute. A simple crossbrowser approach is to use DOM0 syntax:

if (lnks[i].className == "active") {

[crobar]

im attempting to make this script modular, but cant seem to get it working:
im trying to eliminate naming the ids i want to hide, so im just hiding all divs under a specific id:


function collapseAll(){
var divs = document.getElementById("tabscontent").getElementsByTagName("div");
var divamnt = divs.length+1;
for (i=0;i<divamnt;i++ ) {
divs[i].style.display = 'none';
}
}


function switchTab(obj) {
collapseAll();
//------------------------------------------------
var show = document.getElementById(obj);
if ( show.style.display != "none" ) {
show.style.display = 'none';
}
else {
show.style.display = '';
}
}


this just hides the content and ignores the rest of the switchTab function
is it because i set the style of the divs with getElementsByTagName and then tried to change it using getElementById?
thanks again for any help.

[Kor]

var divamnt = divs.length+1;
for (i=0;i<divamnt;i++ )

You added an extra indentation. The last element of a collection has the index collection.length-1. Remove the red +1