Css 如何隐藏一个div onload并需要在按钮单击时显示？

我需要隐藏一个div onload，并需要在一个按钮中单击此div

<input id="abcd" type="button" value="display" />
<div id="xyz" style="height:600px;width:1000px;background-color:black">
    <div style="height: 350px; width: 250px; background-color: red; float: right;margin-right:30px;margin-top:100px;">
        <h1>Charaacters</h1>
    </div>
    <div style="height: 350px; width: 250px; background-color: green; float: left; margin-left: 30px; margin-top: 100px; ">
        <h1>Translated Words</h1>
    </div>
    <div style="height: 350px; width: 250px; background-color: yellow; float: left; margin-left: 100px; margin-top: 100px; ">
        <h1>Translation</h1>
        <input type="text" />
        <input type="button" value="trans" />
    </div>
</div>

角色扮演者
翻译词
翻译

这是我的脚本，但不起作用

$（文档）.ready（函数（）{
$（“#xyz”）.hide（）；
$（“#abcd”）。单击（函数（）{
$（“#xyz”）.hide（）；
});
});

您正在使用

hide（）

内部按钮单击功能，将其更改为

show（）

请看这里的工作小提琴：“

试试这个

$(document).ready(function () {
        $("#xyz").hide();
        $("#abcd").click(function () {
            $("#xyz").toggle();
        });
    });

---

你所说的需要点击这个div是什么意思？您的意思是在单击按钮时再次显示它，然后使用

$（“#xyz”）.show（）
 $(document).ready(function () {
        $("#xyz").hide();
        $("#abcd").click(function () {
        $("#xyz").show(); //This should be show
        });
    });

$(document).ready(function () {
        $("#xyz").hide();
        $("#abcd").click(function () {
            $("#xyz").toggle();
        });
    });