changing nav bar style w javascript

[nullp0inter]

Ok, so I have a nav bar that looks "tabbed" through the use of CSS. The links in the nav bar target an iframe on the same page so that the nav bar never gets reloaded.

onclick, I want the tab to change to its active state(a green tab) however I am having a lot of trouble figuring this out. I know I will need a green tab image for the background, but here's my code, hopefully someone can point me in the right direction:

<div id="nav">
<ul>
<li id="current"><a href="main.html" target="window">Home</a></li>
<li id="current"><a href="owners.html" target="window">Site Owners</a></li>
<li id="current"><a href="services.html" target="window">Services</a></li>
<li id="current"><a href="contact.html" target="window">Contact Us</a></li>
<li id="current"><a href="aboutus.html" target="window">About Us</a></li>
</ul>
<!-- navigation ends-->
</div>

#nav {
clear: both;
padding: 0;margin: 0;
width: 952px;
height: 50px;
background: #988060 url(nav.gif) no-repeat;
}
#nav ul {
float: left;
list-style: none;
margin: 5px 0 0 0;
height: 45px;
padding: 0 0 0 40px;
}
#nav ul li {
float: left;
margin: 0; padding: 0 0 0 10px;
}
#nav ul li a {
float: left;
margin: 0;
padding: 0 15px 0 5px;
color: #FFF;
font: bold 15px/45px 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
text-decoration: none;
}
#nav ul li a:hover, 
#nav ul li a:active {
color: #E7FAA9;
}
#nav ul li#current {
background: transparent url(left-tab.gif) no-repeat;
}
#nav ul li#current a {
color: #4B3D2C;
background: transparent url(right-tab.gif) no-repeat right top;
}

[daveginorge]

The first thing is your code will not vaildate. You are using multuiple existences of id="current" change the id to a class solves that problem. Validate your page. Try using Firefox with firebug addon and the HTML Validator addon this will validate your page in the browser without having to visit validator.w3.org.

[DrDoc]

What does your JavaScript (which changes the tab on click) currently look like?

[nullp0inter]

I scrapped it because I was getting frustrated. But I basically used getElementByTag('li') to change the style however each tab is composed of two images, and so the style switch only changed the left image of the tab. With the CSS I have above, what would be the best way to do this?