如何隐藏div onload并需要在按钮上单击显示?

时间:2015-07-13 06:46:30

标签: css

我需要隐藏div onload并需要点击按钮

<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>

2 个答案:

答案 0 :(得分:0)

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

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

请在此处查看工作小提琴:&#34; https://jsfiddle.net/gpfzassv/&#34;

答案 1 :(得分:0)

试试这个

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