隱藏/取消隱藏div按鈕？

<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應該處於隱藏狀態，歡呼！隱藏/取消隱藏div按鈕？

來源

2014-01-18 Justin

利用javascript –

到目前爲止，您已經嘗試過了什麼？ –

使用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'; 
}

來源

2014-01-18 11:37:05 aksu

它會工作，如果它是一個按鈕，而不是輸入？ – Justin

是的，它從id（'＃button'，'＃closelogin'）獲得點擊事件。只要它具有該id，不論它是哪種類型的元素都無關緊要。 – aksu

使用JavaScript與按鈕ID的幫助下，你可以使div來改變CSS屬性可見的被隱藏。而使用jQuery，你可以使用切換，隱藏，顯示。

來源

2014-01-18 11:40:47

-1

有沒有辦法，你可以在HTML做到這一點/ CSS

您可以使用jQuery

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

關閉

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

你只需要更改爲#closelogin的ID和.css('visibility', 'hidden')

您需要包含Jquery li在你的頭部或頁面底部佩戴這樣的裝置以使其工作。

如：

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

來源

2014-01-18 11:44:15 untitled

看我的例子，而不使用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/

希望這有助於。

來源

2014-01-18 12:39:18

隱藏/取消隱藏div按鈕？

回答

相關問題