0

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

我对Javascript知之甚少，但我猜这就是我需要做的，有人可以指点我一个教程吗？

干杯

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

4

3 回答 3

2

假设您将添加一个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')使用 . "获取" DOM 元素id="myForm"。
  • .addEventListener()向该对象添加事件侦听器。它的第一个参数 ( 'click') 指定它应该监听 (“react”) 的事件，它的第二个参数是事件发生时要执行的函数。这个函数可以addEventListener()在addEventListener().
  • .style.display="block"将元素的displayCSS 样式设置为 value "block"，以再次显示输入字段。
于 2012-12-20T08:26:57.927 回答
0

您的代码如下所示：

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');
  });
});
于 2012-12-20T08:19:49.210 回答
0

将包含您要隐藏的元素的 HTML 元素放入一个常见的 HTML 元素中，例如<div>. 然后为其分配一个包含样式“ display:none”的 CSS 类。您可以在 HTML 代码中执行此操作，但更好的解决方案是在文档加载时为其分配 Javascript，因为在这种情况下，禁用 Javascript 的人可以看到输入。

然后向 div 添加一个 onclick 处理程序，将 CSS 类替换为具有dispay:block.

于 2012-12-20T08:26:54.427 回答