单击链接时如何显示字段？ （javascript）
[英]How do I display field when I click on a link? (javascript)
问题描述
如何创建它，以便在单击“报告用户”时显示一个框，其中显示了报告用户原因的列表和一个提交按钮。
我很少使用javascript ...有人可以指出正确的方向。
5 个解决方案
解决方案1
1 2010-05-07 00:43:24
基本方法是使用Javascript切换CSS显示。 这是下面的代码的分解：
- 页面加载时，将事件附加到链接。 这就是
window.onload部分的工作。 - 用
document.getElementById标识链接和框 - 使用匿名函数捕获显示切换
使用
style.display切换显示。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Onclick Example</title> <script type="text/javascript"> window.onload = function(){ var link = document.getElementById('rulink'); var box = document.getElementById('box'); var close = document.getElementById('close'); link.onclick = function(){ box.style.display = 'block' } close.onclick = function(){ box.style.display = 'none'; } } </script> <style> div{ display:none; background:#f00; width:100px; } </style> </head> <body> <a href="javascript:void(0)" id="rulink">report user</a> <div id="box"> <ul> <li>abc</li> <li>def</li> </ul> <a href="javascript:void(0)" id="close">Close</a> </div> </body>
解决方案2
0 2010-05-07 00:17:26
查看onclick事件。
解决方案3
0 2010-05-07 00:32:50
我会研究jquery，它使javascript更加容易。 使用jquery，您可以使用一行代码执行该操作，例如：
$('.<link class>').click(function(){$('.<list class>').show()});
解决方案4
0 2010-05-07 00:40:06
您可以用这种方式来做，但是很简单：
<a href="" onclick="document.getElementById('something').style.display='inherit';return false" >###</a>
<input style="display:none" type="text" id="something" />
那是“艰难的道路”，但是了解其工作方式很重要。
使用JavaScript框架是值得的。 jQuery是最流行的，它可以使所有UI工作变得更容易。
您可以将onclick缩短为：
$('#something').show()
解决方案5
0 2010-05-07 00:43:30
<script>
document.getElementById("showHide").onclick = function() {
var theDiv = document.getElementById("foo");
if(theDiv.style.display == 'none') {
theDiv.style.display = 'block';
this.innerHTML = 'Hide';
} else {
theDiv.style.display = 'none';
this.innerHTML = 'Show';
}
}
</script>
<span id="showHide">Show</span>
<div id="foo" style="display:none">
<form method="post">
<h3>Here are some reasons</h3>
Blah: <input type="checkbox"/><br />
Blah: <input type="checkbox"/><br />
Blah: <input type="checkbox"/><br />
<input type="submit" value="submit" />
</form>
</div>
在此处尝试： http : //jsfiddle.net/8TNmn/2/，然后单击单击以显示更多内容-也许是JS？
当我单击带有javascript的链接时，如何防止侧面导航返回？
[英]How do i prevent the Side Navigation to go back when i click on a link with javascript?
如何使用JavaScript在新窗口的html字段中显示值？
[英]How do I display value in a html field in a new window with javascript?
当单击wordpress链接时，如何识别JavaScript？
[英]How do I get JavaScript to recognise when a wordpress link is clicked?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.