How to change div class on click event?

i have a head layout and some image on it. I need to change the image on click event. for this i am using javascript.

function changebrouse()
{
document.getElementById("browse").className = "browse";
return false;

}

with the help of this js image can change but on click, page refresh and previous image will appear.

<div id="browse" class="sections_browser"><a href="<?php echo $this->url(
                            array('controller' => 'index', 'action' => 'search'),
                            'default',
                            true) ?>" onclick='changebrouse()'></a></div>

css

.sections_browser a
{
    widt开发者_开发百科h:72px;
    height:31px;
    float:left;
    background-image:url(../images/button/browse_dwn.png);
}

.browse a
{
    width:72px;
    height:31px;
    float:left;
    background-image:url(../images/button/browse_hover.png);
}

please help . Thanks in advance.

Try changing

onclick='changebrouse()'

to

onclick='return changebrouse()'

And in the 'changebrouse' function, the class name should be 'browse' not 'browser', I think.

You need to cancel the click event. Change on your onclick to be:

< ... onclick="changebrouse(); return false;">

returning false will signal to the browser to ignore the click.