Question

我有2个css类和一个由链接调用的js函数。 js函数应该将div的类从一个更改为另一个，当我在chrome中使用开发工具时，我可以看到它再切换回它。以下是各种代码：

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

我将代码更改为此，仍然没有成功：

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

问候。

改变div类的css类然后改变回来

1 个答案: