如何在单击按钮之前隐藏 div？

Question

我正在尝试创建 3 个在页面加载时隐藏的 div，以便当我单击它们各自的按钮时，它们会显示出来，但是，无论我做什么，我都无法通过单击按钮显示它们。

这是代码的相关部分：

我的 div 和按钮：

<button onclick="TestsFunction()">Tests</button>

<div id="TestsDiv" style="display:none">
    tests here!
</div>

JS 用来显示它：

function TestsFunction() {
    var T = document.getElementById("TestsDiv");
    T.style.display = "none";}

我可以在加载页面时成功隐藏 div，但是在单击按钮后它不会再次显示。

我试过

window.onload = function(){
    document.getElementById('TestsDiv').style.display = 'none';
}

而不是在 div 上使用 style="display:none" 来查看我隐藏它的方式是否有问题，但 div 仍然不会显示。

我是初学者，不擅长 JS、HTML 或 PHP，如果可能的话，有人可以帮助并解释我的错误吗？我的代码中还需要其他东西吗？我尝试阅读类似的线程，但解决方案对于我的理解来说太复杂了，最终我无法解决我的问题。谢谢！

Answer 1

您需要将 display 设置为block（或其他），而不是hide在单击按钮时！

function TestsFunction() {
    var T = document.getElementById("TestsDiv");
    T.style.display = "block";  // <-- Set it to block
}

<button onclick="TestsFunction()">Tests</button>

<div id="TestsDiv" style="display:none">
    tests here!
</div>