css - 如何隐藏 div onload 并需要在单击按钮时显示？

Question

我需要隐藏一个 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>

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

    $(document).ready(function () {
        $("#xyz").hide();
        $("#abcd").click(function () {
        $("#xyz").hide();
        });
    });
</script>

Answer 1

您在按钮点击功能中使用了hide()，请将其更改为show()。

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

在这里查看工作 fiddle :“https://jsfiddle.net/gpfzassv/”