Question

我正在进行以下页面： http://mockingbirdagency.com/thebox/bettercss/login-1.html 并希望第一个注册框的右侧部分只出现一次“点击您的电子邮件地址”。

我知道Javascript很少，但我猜这是我需要做的，有人可以指点我的教程吗？

干杯

（编辑：我要求提供链接的原因是我不知道在谷歌上寻找什么）

Answer 1

假设您要为这两个元素添加id：

<div class="form-step-1-container" id="myForm"> <!-- <-- ID here -->
    <h1>Register with your email address</h1>
    <div style="display:none;" id="targetDiv"> <!-- <-- ID here -->
        <input id="username" type="text" placeholder="Choose a Username" required="required" name="username">
        <input id="email" type="text" placeholder="Enter your Email" required="required" name="email">
        <input id="password" type="text" placeholder="Enter your Password" required="required" name="password">
        <input id="password" type="text" placeholder="Re-Enter your Password" required="required" name="password">
    </div>
</div>

使用原生JavaScript：

document.getElementById('myForm').addEventListener('click', function(){
    document.getElementById('targetDiv').style.display = "block";
});

这会向"click" div添加一个"form-step-1-container"事件监听器，在点击时会显示包含输入元素的div。

那么，这实际上是做什么的？

document.getElementById('myForm')使用id="myForm"“获取”DOM元素。
.addEventListener()为此对象添加了一个事件侦听器。它的第一个参数（'click'）指定它应该监听的事件（“反应”），它的第二个参数是事件发生时要执行的函数。这个函数可以在addEventListener()中定义，就像我在这里所做的那样，但你也可以在代码的其他地方定义函数，只需使用addEventListener()中的函数名。
.style.display = "block"将元素的display CSS样式设置为值"block"，以再次显示输入字段。

Answer 2

您的代码如下所示：

<强> HTML

<div class="form-step-1-container">
<h1>Register with your email address</h1>
<div style="display:none;">
<input id="username" type="text" placeholder="Choose a Username" required="required" name="username">
<input id="email" type="text" placeholder="Enter your Email" required="required" name="email">
<input id="password" type="text" placeholder="Enter your Password" required="required" name="password">
<input id="password" type="text" placeholder="Re-Enter your Password" required="required" name="password">
</div>
</div>

<强> JS

$(document).ready(function() {
  $('.form-step-1-container h1').click(function() {
    $('.form-step-1-container div').css('display', 'block');
  });
});

Answer 3

将包含要隐藏的元素的HTML元素放入像<div>这样的公共HTML元素中。然后为其分配一个CSS类，其中包括样式＆＃34; display:none＆＃34;。您可以在HTML代码中执行此操作，但更好的解决方案是在文档加载时使用Javascript为其分配，因为在这种情况下，对于已禁用Javascript的用户，输入将是可见的。

然后在div中添加一个onclick处理程序，用一个dispay:block替换CSS类。

使用javascript显示onclick效果？

3 个答案: