onClick

HI There,

When I click on a <div> how can I make the onMouseDown style stay there so when I move the mouse it doesnt disapear untill I click on the next one?

Hope it make sense

div.tabMain {position: fixed; color: #ffffff; font-size: 13px; border: transparent 1px solid;}

div.tabOver {position: fixed; color: #000000; cursor: hand; font-size: 13px; border: silver 1px solid; background:url('/ccm/images/tab_over_bg.png') #ffffff; background-position: top; background-repeat: repeat-x;}

div.tabDown {position: fixed; color: #000000; font-size: 13px; border: silver 1px solid; background: #ffffff;}

 

 

        <div class="tabMain" onmouseover="this.className='tabOver'" onmousedown="this.className='tabDown'" onmouseout="this.className='tabMain'" style="height: 30px; width: 60px;">

           <center>Home</center>

        </div>

        <div class="tabMain" onmouseover="this.className='tabOver'" onmousedown="this.className='tabDown'" onmouseout="this.className='tabMain'" style="height: 30px; width: 60px;">

           <center>Tools</center>

        </div>


 

HTML:

 

call a function in onMouseDown and add the class to the div with something like $('#tabMain').addClass('tabDown') (thats with jQuery).