Question

    <h1>Welcome! Chat now!</h1>

    <button id="button">Chat Now</button>
    <button id="buttontwo">Chat Categories</button>



    <div id="login" style="visibility:hidden">
    <button id="closelogin">Close</button>
    <input type="text" placeholder="Username"/>
    <p id="loginshiz">Pick a username</p>
    <button id="go">Go</button>
    </div>

当按下“立即聊天”按钮时，我想显示div“登录”，当按下div中的“closelogin”按钮时，我想再次隐藏整个div。目前如果没有按下任何按钮，div应处于隐藏状态，欢呼！

Answer 1

使用jQuery。没办法做普通的html / css。

$('#button').click(function() {
    $('#login').css('visibility', 'visible');
});
$('#closelogin').click(function() {
    $('#login').css('visibility', 'hidden');
});

如果您没有包含jQuery，请使用javascript：

document.getElementById('button').onclick = function() {
    document.getElementById('login').style.visibility = 'visible';
}
document.getElementById('closelogin').onclick = function() {
    document.getElementById('login').style.visibility = 'hidden';
}

Answer 2

不使用JavaScript，请查看我的示例。

    <input type="checkbox" id="box"/>
    <label id="container" for="box">
        <div id="button">Chat Now</div>
        <div id="login">
            <label for="box" id="closelogin">Close</label>
            <input type="text" placeholder="Username"/>
            <p id="loginshiz">Pick a username</p>
            <button id="go">Go</button>
        </div>
    </label>

和css

#box{display: none;}
#container #login{ display: none;}
#box:checked + #container #login{ display: block;}

小提琴http://jsfiddle.net/LUdyb/1/

希望得到这个帮助。

Answer 3

在按钮ID的帮助下使用javascript，您可以通过将css属性更改为visible来隐藏div。使用jquery时，您可以使用切换，隐藏，显示。

Answer 4

你无法在html / css中执行此操作

您可以使用Jquery

$('#button').click(function() {
    $('#login').css('visibility', 'visible');
});

关闭

$('#closelogin').click(function() {
    $('#login').css('visibility', 'hidden');
});

您只需更改#closelogin和.css('visibility', 'hidden')

的ID即可

您需要在页面的顶部或底部包含这样的Jquery库才能使其正常工作。

例如：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

用按钮隐藏/取消隐藏div？

4 个答案: