时间戳

首页 > 解决方案 > 如何在单击按钮之前隐藏 div？

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

问题描述

我正在尝试创建 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，如果可能的话，有人可以帮助并解释我的错误吗？我的代码中还需要其他内容吗？我尝试阅读类似的线程，但解决方案对于我的理解来说太复杂了，我最终无法解决我的问题。谢谢！

标签： javascripthtml

解决方案

您需要将显示设置为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>

推荐阅读