javascript - 更改 div 的 css 类然后改回

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

问候。