Apply CSS via ECMASCript/JavaScript

[w0lf42]

My code seems to work fine except for one line where I'm attempting to apply a defined style to an ID.

CSS:<style type="text/css">
#moduleName .tabs li, .passiveTabs { font-size: 14px; font-weight: 400; }
#moduleName .tabs li.active, .activeTabs { font-weight: 700; }
#moduleName .panels div { display: none; font-size: 12px; }
#moduleName .panels div.active { display: block; }
</style>

ECMAScript:<script type="text/javascript">
//<![CDATA[
function moduleSwitcher(moduleName, numTabs, activateNumber)
{ // change display for module tabs/panels
// localize variables
var i; var j; var k; var l; var m;

// obtain module and child nodes
var myElementID = document.getElementById(moduleName);
var moduleChildren = myElementID.childNodes;

for( i = 0; i < moduleChildren.length; i++ )
{ // loop through children of module
if ( moduleChildren[i].className == "tabs")
{ // for all tabs - apply passive look
for( j = 0, k = 1; j < numTabs; j++, k++ )
{ // cycle through tabs
document.getElementById(moduleName + "_tab" + k).className = 'passiveTabs';
} // end for
} else if ( moduleChildren[i].className == "panels")
{ // for all panels - hide
var panelsChildren = moduleChildren[i].childNodes;
for( l = 0, m = 1; l < numTabs; l++, m++ )
{ // cycle through tabs
document.getElementById(moduleName + "_panel" + m).style.display = 'none';
} // end for
} // end if
} // end for

// change display for activated tabs/panels
document.getElementById(moduleName + "_tab" + activateNumber).className = 'activeTabs';
document.getElementById(moduleName + "_panel" + activateNumber).style.display = 'block';
} // end function
//]]>
</script>

XHTML:<div id="moduleName">
<ul class="tabs">
<li id="moduleName_tab1" class="active"><a href="#moduleName" onclick="moduleSwitcher('moduleName', '2', '1'); return false;">panel1</a></li>
<li id="moduleName_tab2"><a href="#moduleName" onclick="moduleSwitcher('moduleName', '2', '2'); return false;">panel2</a></li>
</ul>

<div class="panels">
<div id="moduleName_panel1" class="active">
panel one
</div>
<div id="moduleName_panel2">
panel two
</div>
</div>
</div>

Everything seems to be working except this line (near the end of the ECMAScript):document.getElementById(moduleName + "_tab" + activateNumber).className = 'activeTabs';

It's not applying the style sheet. Any suggestions?

[Harry Armadillo]

Style selectors have precedence, based on the number of idnames, classname, and tagnames in the selector. You can google for the detail, but generally the more specific selector wins.

When you set a className of 'activeTabs', you have two css rules trying to set the font weight.

.activeTabs { font-weight: 700; }
#moduleName .tabs li { font-size: 14px; font-weight: 400; }

Resulting in a weight of 400, due to the specificity of the second rule.

Since you also have the even more specific rule

#moduleName .tabs li.active { font-weight: 700; }

you should set your className to 'active'.

document.getElementById(moduleName + "_tab" + activateNumber).className = 'active';