I have a tab-styled navigation menu. My goal:

1. Once the user mousovers tab X. add the "tabActive" class to tab X, if the tab already has the "tabActive" class, then remove it
2. Show Div "X"

I have the second part down, and my java code detects which tab is being hovered, but I can not get my additional class toggled correctly.

My code so far:

**HTML**

```
<div id="subnav">
<div id="nav1" onmouseover="toggleDisplay('contentPayment')"  class="Payment myNav">
<a href="#">Payment</a></div>
<div id="nav2"  onmouseover="toggleDisplay('content-shipping')" class="Shipping myNav">
<a href="#">Shipping</a></div>
<div id="nav3" class="Warranty myNav">
<a href="#">Warranty</a></div>
<div id="nav4" class="Feedback myNav">
<a href="#">Feedback</a></div>
</div>

```

**JAVASCRIPT**

```
<script>

var divs = new Array();
divs.push("contentPayment");
divs.push("content-shipping");

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

function toggleDisplay(id) {
for (var i = 0; i < divs.length; i++) {
    var item = document.getElementById(divs[i]);
    item.style.display = 'none';
}

//Now use the passed ID to show the div you wanted to show
var target = document.getElementById(id);
target.style.display = 'block';

if (id == "contentPayment") {
    var CurrentTab = document.getElementById("nav1");
    var AlreadyActive = hasClass("nav1", " tabActive");

    if (AlreadyActive == true) {
        CurrentTab.className = "Payment myNav";
    } else {

        CurrentTab.className += " " + "tabActive";
    }

}
}

</script>​

```

Any ideas what my problem is? I know jQuery would be *much* easier, but I am coding for eBay and they do not allow it. How do I get my tabActive class to toggle correctly?