How do I display field when I click on a link? (javascript)
Question
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.
5 answers
solution1
1 2010-05-07 00:43:24
The basic approach is to toggle the CSS display with Javascript. 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. - Identify the links and box with
document.getElementById - Use an anonymous function to capture the display toggle
Toggle the display with
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>
solution2
0 2010-05-07 00:17:26
查看onclick事件。
solution3
0 2010-05-07 00:32:50
I would look into jquery, it makes javascript much easier. Using jquery you could perform that using one line of code such as:
$('.<link class>').click(function(){$('.<list class>').show()});
solution4
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. Jquery is the most popular and it can seriously make doing any UI work WAY easier.
You can shorten that onclick to:
$('#something').show()
solution5
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?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.