Question

如何创建它，以便当我点击“报告用户”时，会显示一个框，其中显示了报告用户和提交按钮的原因列表。

我很少使用javascript ...有人能指出我正确的方向。

Answer 1

基本方法是使用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>

Answer 2

了解onclick个事件。

Answer 3

我会调查jquery，它使javascript更容易。使用jquery，您可以使用一行代码执行该操作，例如：

$('.<link class>').click(function(){$('.<list class>').show()});

Answer 4

你可以这样做，但它很粗糙：

<a href="" onclick="document.getElementById('something').style.display='inherit';return false" >###</a>
<input style="display:none" type="text" id="something"  />

这是“艰难的方式”，但了解它的运作方式非常重要。

使用JavaScript框架是值得的。 Jquery是最受欢迎的，它可以认真地让任何UI工作变得更容易。

您可以将其缩短为：

$('#something').show()

Answer 5

<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/并查看Click to show more - maybe JS?

点击链接后如何显示字段？（JavaScript的）

5 个答案:

点击链接后如何显示字段？ （JavaScript的）

5 个答案:

点击链接后如何显示字段？（JavaScript的）