如何隐藏和显示 html 页面以制作简单的菜单？答案

【问题标题】：How do I hide and show an html page in order to make a simple menu?如何隐藏和显示 html 页面以制作简单的菜单？
【发布时间】：2019-05-10 17:42:57
【问题描述】：

我正在尝试为作业创建一个简单的菜单，但在隐藏当前菜单页面并显示与单击的按钮相对应的菜单页面时遇到了问题。我怎样才能做到这一点？我是 javascript 新手。

我有一个按钮处理程序来处理带来新页面的按钮的点击。我尝试禁用所有元素所在的导航，但这似乎不起作用。

function main() {
  var ButtonSingle = document.getElementsId("UJOGADOR");
  ButtonSingle.addEventListener("click", btnSingleHandler);
}

function btnSingleHandler(ev) {
  var page = document.getElementsId("menu");
  page.disabled = true;
}

html:

<body>
    <main>
        <nav id = "menu">
            <button id="UJOGADOR"><img src="../resources/btn4.png"></button>
        </nav>
    </main>

    <audio loop>
        <source src="">
    </audio>
</body>

应该发生的是当前菜单页面被隐藏并且会出现一个新的菜单页面，但是当我运行它时没有任何反应。

【问题讨论】：

getElementsId 应该是 getElementById
How do you create a hidden div that doesn't create a line break or horizontal space?的可能重复
你的btnSingleHandler(ev) 接受了一个论点，而你却什么都不做？

标签： javascript html

【解决方案1】：

我看到了两件事。

1) getElementsId 不是函数。您可能是指 getElementById

    var ButtonSingle = document.getElementById("UJOGADOR");

2) 如果你想隐藏一个 HTML 元素，你可以将它的 CSS 属性设置为 display: none。您可以通过动态更改类或使用您已经尝试过的功能来做到这一点。

    function btnSingleHandler(ev){
        var page = document.getElementById("menu");
        page.style.display = "none";
    }

只要您正确设置按钮的事件侦听器，类似的东西应该可以工作。

【讨论】：

【解决方案2】：

首先，没有名为 getElementsId 的函数。你应该使用：

var page = document.getElementById("menu");

在文档中显示和隐藏元素是一项常见任务。要隐藏任何元素，你可以给它一个display:none 样式：

myElement.style.display = "none";

要显示一个隐藏的元素，给它一个可见的样式：

myElement.style.display = "block";
myElement.style.display = "inline";
myElement.style.display = "inline-block";

【讨论】：