顯示隱藏的內容

可能重複：
JS/jQuery (Hide div, show div on click)顯示隱藏的內容

我新的網絡開發和想知道什麼隱藏要素的最佳方式了。我正在創建一個記事本應用程序，並希望有一個簡單的「添加註釋」html表單，當您單擊按鈕時該表單會展開。我會用CSS或Javascript做這個嗎？

例如

Add Note

被點擊將擴大到HTML表單像這樣

Note Title: <form> 

Note Body: <form>

謝謝了！

來源

2011-12-26 Charles Murray

您可以使用CSS – Virendra 2011-12-26 05:49:36

有隱藏的元件的多種方式。您可以將display屬性設置爲hidden，也可以使用java腳本將其隱藏。下面給出的是使用jQuery的解決方案。

的Html

<a href="#" class="clickme" > Add Note</a> 
<div id="addNote"> 
    <!-- Your form goes here --> 
</div>

你把你的筆記形式，ID爲addNote股利。而對於這個JavaScript是

$(document).ready(function() { 
    $('#addNote').hide(); 
    $('.clickme').click(function() { 
     $('#addNote').show(); 
     $('.clickme').hide(); 
     return false; 
    }); 
});

頁面加載時，首先addNote格被隱藏這個$('#addNote').hide();當有人點擊與類clickme具有形式DIV的鏈接上顯示，並且clickme按鈕被隱藏。

你可以，如果你正在使用JQuery添加轉場效果$('#addNote').show()

來源

2011-12-26 05:54:36 Sachin

我建議你使用jQuery庫，它有很多選項可以很容易地在頁面中顯示/隱藏元素。這裏有一個基本的example，你可以找到很多很酷的效果（fadeIn/fadeOut，slideUp/slideDown ...），

來源

2011-12-26 05:51:07 talnicolas

你必須使用JavaScript來附加點擊事件處理程序。當點擊事件處理程序執行時，您可以使用JavaScript元素的display屬性從block切換到none。

像


document.getElementById('elementID').onclick = function(){ 
var hiddenElement = document.getElementById('elementHidden'); 
if(hiddenElement.style.display=='none') 
hiddenElement.style.display = 'block'; 
else 
hiddenElement.style.display = 'none'; 
}

來源

2011-12-26 05:54:00

的「display」屬性在'document.getElementById'，你除非你使用jQuery或其他東西，否則不需要'＃'。我相信事件處理程序是'onclick'。 'click'是一個本地函數，它允許你模擬任何元素的點擊。另外，一些縮進會很好。 – 2011-12-26 06:18:45

感謝@Amaan混合了一點jquery編輯的答案 – 2011-12-26 07:13:13

這裏是一個快速的解決方案：

$(function(){ 
    $("#YOUR ADD NOTE ELEMENT ID").click(function(){ 
     $("#YOUR FORM ID").toggle(); 
    }) 
})

來源

2011-12-26 06:37:01

顯示隱藏的內容

回答

相關問題