有没有办法组合这些功能？

如何解决有没有办法组合这些功能？

我正在开发一个小网站，它加载第一页，但在用户单击相关按钮之前隐藏其他页面。

所以，当用户点击“Start Page 2”时，html 有一个 onclick 方法：

onclick="startPageTwo()"

下面是javascript：

const startPageOne = () => {
    document.getElementById("section-one").style.display = "flex";
    document.getElementById("section-two").style.display = "none";
    document.getElementById("section-three").style.display = "none";
}

const startPageTwo = () => {
    document.getElementById("section-two").style.display = "flex";
    document.getElementById("section-one").style.display = "none";
    document.getElementById("section-three").style.display = "none";
}

const startPageThree = () => {
    document.getElementById("section-three").style.display = "flex";
    document.getElementById("section-one").style.display = "none";
    document.getElementById("section-two").style.display = "none";}

如您所见，有 3 个函数，每个函数的作用略有不同。

我将如何创建一个函数来检查按下的按钮的 id 或类，并打开和关闭相应的页面？

解决方法

如果你的函数接受一个代表所选页面的参数，你可以添加一些逻辑来确定在每种情况下应该向每个部分添加什么类：

 const selectPage= (page) => {
    document.getElementById("section-one").style.display = page === 'one' ? "flex" : "none";
    document.getElementById("section-two").style.display = page === 'two' ? "flex" : "none";
    document.getElementById("section-three").style.display = = page === 'three' ? "flex" : "none";
}

然后你可以从每个按钮不同地调用它，例如：

onclick="selectPage('one')"