Javascript indirectly changes the CSS style by changing the element Class Name
CSS:
/* Font link style */TD. firstlevelmenuclass A: link {color: # 3e8bac; text-Decoration: none;}/* unaccessed link */TD. firstlevelmenuclass A: visited {color: # ffffff; text-Decoration: none;}/* accessed link */TD. firstlevelmenuclass A: hover {color: # ffffff;}/* move the cursor over the link */TD. firstlevelmenuclass A: active {color: # ffffff;}/* selected link * // * mouse event background style */TD. firstlevelmenuclass: hover {background-image: URL (.. /.. /public/img/menu_first_down_bg.gif);}/* move the cursor over the link */TD. firstlevelmenuclasshover {background-image: URL (.. /.. /public/img/menu_first_down_bg.gif);} TD. firstlevelmenuclass {background-image: URL (.. /.. /public/img/head_menu_center.gif );}
JS:
/** Obtain the HTML element of the corresponding class and tag * clsname: given class name * tagname: Given HTML element, if any tagname = '*' **/function getelementsbyclassname (clsname, tagname) {var classelements = []; selelements = document. getelementsbytagname (tagname); For (VAR I = 0; I <selelements. length; I ++) {If (selelements [I]. classname = clsname) {classelements [classelements. length] = selelements [I];} return classelements;} // indirectly change the background style by changing the element class name. Function onfirstmenuchangebg (E) {// first clear the changed element background style var getelements = getelementsbyclassname ('firstlevelmenuclasshover ', 'td'); For (VAR I = 0; I <getelements. length; I ++) {getelements [I]. classname = "firstlevelmenuclass";} // set the background style of the clicked element. classname = "firstlevelmenuclasshover ";}
HTML:
<TD class = "firstlevelmenuclass" id = "firstlevelmenu0" onclick = "onfirstmenuchangebg (this ); "> <a href = '#'> test 0 </a> </TD> <TD class =" firstlevelmenuclass "id =" firstlevelmenu1 "onclick =" onfirstmenuchangebg (this ); "> <a href = '#'> Test 1 </a> </TD> <TD class =" firstlevelmenuclass "id =" firstlevelmenu2 "onclick =" onfirstmenuchangebg (this ); "> <a href = '#'> Test 2 </a> </TD>