Javascript onclick change href class css style

im using this javascript code to run ‘onclick’ to change my href class style.

It works to change the style, but when i click on the next menu item, the previous one is not reverted back to how it was previously, but the formatting is stripped away leaving the link purple with no background image.

How do i get it to revert to the orioginal class which is set?

Here is the javascript :-


<script language=“JavaScript” type=“text/javascript”>
/<![CDATA[/
var Lst;

function CngClass(obj){
if (Lst) Lst.className=‘’;
obj.className=‘menu1’;
Lst=obj;
}

/]]>/
</script>


Here is the relevant CSS :-

.menu
{
background: url(‘…/images/productblack.jpg’) repeat;
width: 100%;
line-height: 24px;
float:left;
display:inline;
font-family: Verdana;
color : #ffffff;
font-size: 8pt;
text-decoration: none;
text-align: left;
font-weight:bold;
}
.menu:hover
{
background: url(‘…/images/productgrey.jpg’) repeat;
width: 100%;
line-height: 24px;
float:left;
display:inline;
font-family: Verdana;
color : #000000;
font-size: 8pt;
text-decoration: none;
text-align: left;
font-weight:bold;
}

.menu1
{
background: url(‘…/images/productblue.jpg’) repeat;
width: 100%;
line-height: 24px;
float:left;
display:inline;
font-family: Verdana;
color : #000000;
font-size: 8pt;
text-decoration: none;
text-align: left;
font-weight:bold;
}
.menu1:hover
{
background: url(‘…/images/productblue.jpg’) repeat;
width: 100%;
line-height: 24px;
float:left;
display:inline;
font-family: Verdana;
color : #000000;
font-size: 8pt;
text-decoration: none;
text-align: left;
font-weight:bold;
}


Here is the HTML :-


<div id=“masterdiv”>

														&lt;div onclick="SwitchMenu('sub1')"&gt;&lt;a class="menu" onclick="CngClass(this);"  href="javascript:nothing()"&gt;&nbsp; &nbsp; &nbsp; &nbsp; RESISTORS&lt;/a&gt;&lt;/div&gt;
															&lt;span class="submenu" id="sub1"&gt;
																	&nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="productsubmenu" href="resistors.html"&gt;Surface Mount&lt;/a&gt;&lt;br&gt;
																	&nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="productsubmenu" href="resistors.html"&gt;Through Hole (Sannohm)&lt;/a&gt;&lt;br&gt;
																	&nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="productsubmenu" href="resistors.html"&gt;Power Resistors (Sannohm)&lt;/a&gt;&lt;br&gt;
																	&nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="productsubmenu" href="resistors.html"&gt;Carbon Film (Sanyo-OHM)&lt;/a&gt;
																&lt;/span&gt;
							
														&lt;div onclick="SwitchMenu('sub2')"&gt;&lt;a class="menu" onclick="CngClass(this);"   href="javascript:nothing()"&gt;&nbsp; &nbsp; &nbsp; &nbsp; CAPACITORS&lt;/a&gt;&lt;/div&gt;
																&lt;span class="submenu" id="sub2"&gt;
																	&nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="productsubmenu" href="capacitors.html"&gt;Ceramic&lt;/a&gt;&lt;br&gt;
																	&nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="productsubmenu" href="capacitors.html"&gt;Electrolytic&lt;/a&gt;&lt;br&gt;
																	&nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="productsubmenu" href="capacitors.html"&gt;Film Capacitors&lt;/a&gt;&lt;br&gt;
																	&nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="productsubmenu" href="capacitors.html"&gt;Resin Dipped Film Capacitors&lt;/a&gt;&lt;br&gt;
																	&nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="productsubmenu" href="capacitors.html"&gt;Tantalum Capacitors&lt;/a&gt;&lt;br&gt;
																	
																&lt;/span&gt;
														
														&lt;div onclick="SwitchMenu('sub3')"&gt;&lt;a onclick="CngClass(this);"  class="menu" href="javascript:nothing()"&gt;&nbsp; &nbsp; &nbsp; &nbsp; LED/LED DISPLAYS&lt;/a&gt;&lt;/div&gt;
																&lt;span class="submenu" id="sub3"&gt;
																	&nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="productsubmenu" href="led.html"&gt;LED / LED Displays&lt;/a&gt;&lt;br&gt;
																	
																&lt;/span&gt;

Here is a working page with it (the product menu on the right)

http://i-newmedia.com/spi/product.html

thanks…

If you are comfortable to use jQuery then it is pretty easier. Do you want to stick on your normal Javascript or want to change it to jQuery?

If you dont want to go for jquery then try something like follows in your function just assigning the Lst’s class name back as ‘menu’ back as follows:


    var Lst;
	function CngClass(obj){
		if (Lst)
			Lst.className = 'menu';
		obj.className = 'menu1';
		Lst = obj;
	}

thanks alot, that works perfectly.

much appreciated!