更改css類的div作品，然後改回

Question

我有2個CSS類和一個由鏈接調用的js函數。 JS函數應該將div的類從一個變爲另一個，當我在chrome中使用開發工具時，我可以看到它切換到它然後再回來。繼承人的各種代碼片段：

js文件：

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"; 
} 

我改變了代碼到這一點，仍然沒有成功：

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"> 
         <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> 

Answer 1

安靜一點代碼很簡單。

Heres a solution/example

問候。