changing css class of div works then changes back

I have 2 css classes and a js function that is called by a link. the js function is supposed to change the class of a div from one to another, and when I use the dev tool in chrome I can see it switch to it then back again. heres various code pieces:

js file:

function resetButtons()
{
    document.getElementById("appsButton").className = "navBarButton";
    document.getElementById("servicesButton").className = "navBarButton";
    document.getElementById("aboutusButton").className = "navBarButton";
    document.getElementById("ourresumeButton").className = "navBarButton";
    console.log("Animation complete.");
}

function buttonPress()
{
    resetButtons();
    document.getElementById("appsButton").className = "navBarButtonSelected";
}

I changed the code to this, still no success:

function appsButtonPress()
{
    document.getElementById("appsButton").className = "navBarButtonSelected";
    document.getElementById("servicesButton").className = "navBarButton";
    document.getElementById("aboutUsButton").className = "navBarButton";
    document.getElementById("ourResumeButton").className = "navBarButton";
}

function servicesButtonPress()
{
    document.getElementById("appsButton").className = "navBarButton";
    document.getElementById("servicesButton").className = "navBarButtonSelected";
    document.getElementById("aboutUsButton").className = "navBarButton";
    document.getElementById("ourResumeButton").className = "navBarButton";
}

function aboutUsButtonPress()
{
    document.getElementById("appsButton").className = "navBarButton";
    document.getElementById("servicesButton").className = "navBarButton";
    document.getElementById("aboutUsButton").className = "navBarButtonSelected";
    document.getElementById("ourResumeButton").className = "navBarButton";
}

function ourResumeButtonPress()
{
    document.getElementById("appsButton").className = "navBarButton";
    document.getElementById("servicesButton").className = "navBarButton";
    document.getElementById("aboutUsButton").className = "navBarButton";
    document.getElementById("ourResumeButton").className = "navBarButtonSelected";
}

HTML:

<td>
                    <a href="" onClick="appsButtonPress();" class="navLink">
                        <div class="navBarButton" id="appsButton">
                        Apps
                        </div>
                    </a>
                </td>
                <td>
                    <a href="" onClick="servicesButtonPress();" class="navLink"&开发者_如何学Cgt;
                        <div class="navBarButton" id="servicesButton">
                        Services
                        </div>
                    </a>
                </td>
                <td>
                    <a href="" onClick="aboutUsButtonPress();" class="navLink">
                        <div class="navBarButton" id="aboutUsButton">
                        About Us
                        </div>
                    </a>
                </td>
                <td>
                    <a href="" onClick="ourResumeButtonPress" class="navLink">
                        <div class="navBarButton" id="ourResumeButton">
                        Our Resume
                        </div>
                    </a>
                </td>

Quiet a bit of code todo something simple.

Heres a solution/example

Regards.