Динамическое изменение класса в JSВосстанавливаю исходные данные по теме.
Взято с официального сайта Мамбы (
www.mamboserver.com), уж очень понравилось мне их решение.
javascript:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
html:
<div id="nav"><ul>
<li class='active'><a href="http://www.mamboserver.com">Mamboserver</a></li>
<li><a href="http://news.mamboserver.com">News</a></li>
<li><a href="http://forum.mamboserver.com">Forums</a></li>
<li><a href="http://mamboforge.net">Projects</a></li>
<li><a href="http://help.mamboserver.com">Help</a></li>
</ul></div>
css:
div#nav li:hover, div#nav li.sfhover {
background:url(../images/over_tab_l.png) no-repeat bottom left;
}
div#nav li:hover a, div#nav li.sfhover a {
background:url(../images/over_tab_r.png) no-repeat bottom right;
}