显示隐藏的内容
我新的网络开发和想知道什么隐藏要素的最佳方式了。我正在创建一个记事本应用程序,并希望有一个简单的“添加注释”html表单,当您单击按钮时该表单会展开。我会用CSS或Javascript做这个吗?
例如
Add Note
被点击将扩大到HTML表单像这样
Note Title: <form>
Note Body: <form>
谢谢了!
有隐藏的元件的多种方式。您可以将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()
我建议你使用jQuery库,它有很多选项可以很容易地在页面中显示/隐藏元素。这里有一个基本的example,你可以找到很多很酷的效果(fadeIn/fadeOut,slideUp/slideDown ...),
你必须使用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';
}
的“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();
})
})
您可以使用CSS – Virendra 2011-12-26 05:49:36