Javascript 对象的类没有'；不要第一次就改变，以后就改变了

现在，标题可能有点模糊，因为我的问题有点难以用一句话来描述。我会尽量解释清楚的

我的网站有一个固定的标题，其中有4个按钮。我制作了一个小javascript文件，每当你点击它时，它都会改变每个按钮的类（如果你点击一个按钮，这个类会变成“menuButtonSelected”，而所有其他类都会变成“menuButton”）。这是我的javascript文件：

function setButtonOne() {
    if(document.getElementById("buttonOne").className == "menuButton") {
        document.getElementById("buttonOne").className = "menuButtonSelected";
        document.getElementById("buttonTwo").className = "menuButton";
        document.getElementById("buttonThree").className = "menuButton";
        document.getElementById("buttonFour").className = "menuButton";
    }

    else if(document.getElementById("buttonOne").className == "menuButtonSelected") {
        // Do nothing
    }
}

function setButtonTwo() {
    if(document.getElementById("buttonTwo").className == "menuButton") {
        document.getElementById("buttonTwo").className = "menuButtonSelected";
        document.getElementById("buttonOne").className = "menuButton";
        document.getElementById("buttonThree").className = "menuButton";
        document.getElementById("buttonFour").className = "menuButton";
    }

    else if(document.getElementById("buttonTwo").className == "menuButtonSelected") {
        // Do nothing
    }
}

function setButtonThree() {
    if(document.getElementById("buttonThree").className == "menuButton") {
        document.getElementById("buttonThree").className = "menuButtonSelected";
        document.getElementById("buttonTwo").className = "menuButton";
        document.getElementById("buttonOne").className = "menuButton";
        document.getElementById("buttonFour").className = "menuButton";
    }

    else if(document.getElementById("buttonThree").className == "menuButtonSelected") {
        // Do nothing
    }
}

function setButtonFour() {
    if(document.getElementById("buttonFour").className == "menuButton") {
        document.getElementById("buttonFour").className = "menuButtonSelected";
        document.getElementById("buttonTwo").className = "menuButton";
        document.getElementById("buttonThree").className = "menuButton";
        document.getElementById("buttonOne").className = "menuButton";
    }

    else if(document.getElementById("buttonFour").className == "menuButtonSelected") {
        // Do nothing
    }
}

因此每个按钮都有一个单独的id（buttonOne、buttonTwo、buttonThree、buttonFour）。在我的html文件中，我根据按钮的id设置了

onclick

。因此

buttone

将有

onclick

的

setButtonOne（）

等等

以下是我的html代码的相关部分（请原谅我的格式设置，它是以某种方式复制的…）：

这就是问题所在。

每当我再次访问我的网站，并点击第二个按钮时，它不会改变。当我再次单击时，它会。不知何故，如果我点击第三个或第四个按钮，它将正常工作。只要我单击第二个按钮，

menuButtonSelected

类就会返回到第一个按钮

对我来说，唯一的可能是

setButtonTwo（）

函数中有错误，但我找不到任何东西

有人知道怎么解决这个问题吗

---

注意：如果你想看到网站的功能，链接是正确的（它是荷兰语，但你会得到这个概念）

你需要在每个javascript函数中返回false，这样页面就不会提交

这是HTML

<a href="http://www.ysbakker.eu/site/index.html#home"><div id="buttonOne" class="menuButtonSelected" onclick="return setButtonOne();">
    <p class="menuText">Home</p>
</div></a>

<a href="http://www.ysbakker.eu/site/index.html#projects"><div id="buttonTwo" class="menuButton" onclick="return setButtonTwo();titleProjects();">
    <p class="menuText">Projecten</p>
</div></a>

<div id="buttonThree" class="menuButton" onclick="setButtonThree();">

</div>

<div id="buttonFour" class="menuButton" onclick="setButtonFour();">

</div>

请注意，每个javascript false都会返回，每个按钮中的onclick都会返回函数的值

---

以下是。

事实证明，我自己找到了一个解决方案：只需使用重定向页面重定向到完整的URL路径即可。

---

我没有重定向到

[domain]/site

而是重定向到

[domain]/site/index.html

。它不再给我带来任何麻烦。

您是否在按钮二的

onclick

事件处理程序中意外调用了

setButtonOne

？另外，你提供的链接似乎对我有用。请同时显示HTML文件。您是否也在HTML中设置了类？请注意，要使代码正常工作，所有菜单按钮都必须标记为

class=“menuButton”

@EduardoFernandes这已经是事实，只需添加HTML，您就可以查看代码了。什么是

titleProjects（）做什么？它会改变风格吗？你试过把它取下来吗？我完全按照你的建议做了，但还是不行。（检查链接，当您第一次单击第二个按钮时，底部的蓝线仍然停留在第一个按钮上。）您是否尝试过我在答案中提供的JSFIDLE代码？如果你测试它，它工作得很好。我这样说是因为你应该将代码与你的代码进行比较：）。你提到代码工作不正常，但如果你注意，它实际上是好的。你提供的代码确实工作得很好，但问题是，我尝试了你的建议，现在我的代码与你的完全一样，尽管我仍然有同样的问题。我还尝试在另一个web浏览器中加载我的页面，但出现了相同的问题。您是否尝试使用cosole.log或alert检查类中的值？但这与您发布的问题无关，因此您不应将其作为答案发布。我只是想在这里帮助您。版主可能会惩罚你
<a href="http://www.ysbakker.eu/site/index.html#home"><div id="buttonOne" class="menuButtonSelected" onclick="return setButtonOne();">
    <p class="menuText">Home</p>
</div></a>

<a href="http://www.ysbakker.eu/site/index.html#projects"><div id="buttonTwo" class="menuButton" onclick="return setButtonTwo();titleProjects();">
    <p class="menuText">Projecten</p>
</div></a>

<div id="buttonThree" class="menuButton" onclick="setButtonThree();">

</div>

<div id="buttonFour" class="menuButton" onclick="setButtonFour();">

</div>

function setButtonOne() {
    if(document.getElementById("buttonOne").className == "menuButton") {
        document.getElementById("buttonOne").className = "menuButtonSelected";
        document.getElementById("buttonTwo").className = "menuButton";
        document.getElementById("buttonThree").className = "menuButton";
        document.getElementById("buttonFour").className = "menuButton";
    }

    else if(document.getElementById("buttonOne").className == "menuButtonSelected") {
        // Do nothing
    }

    return false;
}

function setButtonTwo() {
    if(document.getElementById("buttonTwo").className == "menuButton") {
        document.getElementById("buttonTwo").className = "menuButtonSelected";
        document.getElementById("buttonOne").className = "menuButton";
        document.getElementById("buttonThree").className = "menuButton";
        document.getElementById("buttonFour").className = "menuButton";
    }

    else if(document.getElementById("buttonTwo").className == "menuButtonSelected") {
        // Do nothing
    }
    return false;
}

function setButtonThree() {
    if(document.getElementById("buttonThree").className == "menuButton") {
        document.getElementById("buttonThree").className = "menuButtonSelected";
        document.getElementById("buttonTwo").className = "menuButton";
        document.getElementById("buttonOne").className = "menuButton";
        document.getElementById("buttonFour").className = "menuButton";
    }

    else if(document.getElementById("buttonThree").className == "menuButtonSelected") {
        // Do nothing
    }
    return false;
}

function setButtonFour() {
    if(document.getElementById("buttonFour").className == "menuButton") {
        document.getElementById("buttonFour").className = "menuButtonSelected";
        document.getElementById("buttonTwo").className = "menuButton";
        document.getElementById("buttonThree").className = "menuButton";
        document.getElementById("buttonOne").className = "menuButton";
    }

    else if(document.getElementById("buttonFour").className == "menuButtonSelected") {
        // Do nothing
    }
    return false;
}