单击链接时如何显示字段？ （javascript）
[英]How do I display field when I click on a link? (javascript)
问题描述
how do I create it so that when I click "report user", a box displays and it shows a list of reasons why to report the user and a submit button. 
如何创建它，以便在单击“报告用户”时显示一个框，其中显示了报告用户原因的列表和一个提交按钮。
I rarely use javascript...can someone point me in the right direction. 我很少使用javascript ...有人可以指出正确的方向。
5 个解决方案
解决方案1
1 2010-05-07 00:43:24
The basic approach is to toggle the CSS display with Javascript. 基本方法是使用Javascript切换CSS显示。 This is the break down of the below code: 这是下面的代码的分解：
- Attach an event to the links when the page loads. 页面加载时，将事件附加到链接。 This is what the
window.onloadpart does.这就是window.onload部分的工作。 - Identify the links and box with
document.getElementById用document.getElementById标识链接和框 - Use an anonymous function to capture the display toggle 使用匿名函数捕获显示切换
Toggle the display with
style.display.使用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
I would look into jquery, it makes javascript much easier. 我会研究jquery，它使javascript更加容易。 Using jquery you could perform that using one line of code such as: 使用jquery，您可以使用一行代码执行该操作，例如：
$('.<link class>').click(function(){$('.<list class>').show()});
解决方案4
0 2010-05-07 00:40:06
You can do it this way, but it's pretty crude: 您可以用这种方式来做，但是很简单：
<a href="" onclick="document.getElementById('something').style.display='inherit';return false" >###</a>
<input style="display:none" type="text" id="something" />
That's the "hard way", but understanding how it works is important. 那是“艰难的道路”，但是了解其工作方式很重要。
It is worth it to use a JavaScript framework. 使用JavaScript框架是值得的。 Jquery is the most popular and it can seriously make doing any UI work WAY easier. jQuery是最流行的，它可以使所有UI工作变得更容易。
You can shorten that onclick to: 您可以将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>
Try it here: http://jsfiddle.net/8TNmn/2/ and see Click to show more - maybe JS? 在此处尝试： http : //jsfiddle.net/8TNmn/2/，然后单击单击以显示更多内容-也许是JS？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.