dynamic backcolor for tablist current

[mfunai]

I can not figure out how to setup my colors for the background of my tablist items when they are selected. I need different color for current tab. It always keeps both tabs the #tablist li a{ background color. Can anyone help me?

I use the following code and settings.

function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}

var previoustab=""

function expandcontent(cid, aobject){
if (document.getElementById("currenttab") != null) {
detectSourceindex(aobject)
document.getElementById("currenttab").value = tabsourceindex+1 + "," + cid;
}
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="") {
document.getElementById(previoustab).style.display="none"
}
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()

if (arguments.length > 2) {
var focusobj = document.getElementById(arguments[2])
if (focusobj != null) {
focusobj.focus();
}
}

return false
} else
return true
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
}

function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function detectSourceindex(aobject) {

for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs
break
}
}

}

function do_onload(){
if (document.getElementById("currenttab") != null)
{

//var initialtab=[1, "sc1"]
// alert(tabtext + "|" + tabtext.substring(0,1) + "|" + tabtext.substring(2) + "|")
var tabtext=document.getElementById("currenttab").value
initialtab[0] = tabtext.substring(0,1)
initialtab[1] = tabtext.substring(2)
}

var cookiecheck=window.get_cookie && get_cookie(window.location.pathname).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(window.location.pathname).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
} else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1], initialtab[2])
}


<li>
<A class="current" onclick="expandcontent('sc1',this, 'RNCOVEREDSNBOX')" href="#">Product
&amp; Dealer Detail</A>
<li>
<A onclick="expandcontent('sc2',this, 'RNCOVERAGEOPTIONDROPDOWN')" href="#">Purchase
&amp; Customer Detail</A>
</li>

#tablist li a:link, #tablist li a:hover{
color: #cccccc;
backgroundColor: white;
}

#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 2px solid black;
border-bottom: none;
background: white;
text-decoration: none;
}

#tablist li a.current{
background: #CC002B;
}

#tablist li a:link, #tablist li a:active{
color: white;
background: #CC002B;
}

#tabcontentcontainer{
width: 99%;
/* Insert Optional Height definition here to give all the content a unified height */
padding: 5px;
border: 2px solid black;
backgroundColor: white;
}