Changing the class of an element with onclick javascript

I need to figure out how to change the class of an element when an OnClick is triggered via javascript. Basically, I have the following code: index.html ``` <div class="bottom_section"> <div class="tab_section"> <div class="tabing"> <ul> <li id="active_news"><a onclick="ContentSwitch('News');"> <img src="includes/t_news.png" width="23" height="81" alt="t_news"> </a></li> <li id="active_events"><a onclick="ContentSwitch('Events');"> <img src="includes/t_events.png" width="20" height="121" alt="t_events"> </a></li> <li id="active_updates"><a onclick="ContentSwitch('Updates');"> <img src="includes/t_updates.png" width="19" height="141" alt="t_updates"> </a></li> </ul> </div> ``` this list of images appears on the left of a box that switches the content shown in the box. I have a class in my css: ``` .bottom_section .tabing li.active{background: #1ca1e3 url(tab_li_active.gif) repeat-x 0 0;} ``` That changes the background of the tab image to a darker shade to show that it's "clicked". So, I basically need to add a class="active" to the < li > tag if the tab is "selected". I have the javascript code, which I found here on Stack Overflow to try and switch the class but it doesn't work. ``` function ContentSwitch(id) { if (id == "News") { if (document.getElementById("news_content").style.display = "none") { document.getElementById("news_content").style.display = "block"; document.getElementById("active_news").className = document.getElementById("active_news").className.replace( /(?:^|\s)active(?!\S)/ , '' ) // Hide other content document.getElementById("events_content").style.display = "none"; document.getElementById("updates_content").style.display = "none"; } } if (id == "Events") { if (document.getElementById("events_content").style.display = "none") { document.getElementById("events_content").style.display = "block"; document.getElementById("active_events").className = document.getElementById("active_events").className.replace( /(?:^|\s)active(?!\S)/ , '' ) // Hide other content document.getElementById("news_content").style.display = "none"; document.getElementById("updates_content").style.display = "none"; } } if (id == "Updates") { if (document.getElementById("updates_content").style.display = "none") { document.getElementById("updates_content").style.display = "block"; document.getElementById("active_updates").className = document.getElementById("active_updates").className.replace( /(?:^|\s)active(?!\S)/ , '' ) // Hide other content document.getElementById("news_content").style.display = "none"; document.getElementById("events_content").style.display = "none"; } } } ``` All the onclick works (the content is switched successfully) but the tab images do not switch. If I add manually the class="active" to the < li > tag, and click on any other tab the active goes away and doesn't come back, so the javascript is doing something. what am I missing? Thanks for any help you can provide.