Question

我做了一个登录屏幕。一格内有2种表格。一个包含登录框，另一个用于注册，该登录框通过使用display：none;隐藏在CSS中。在登录按钮下方，有一个带有标签的段落，可单击以进行注册。我该怎么做，当您单击标签时，它只是从登录表单切换为注册表单？

如果是关于javascript的，那么我就处于起步阶段。

<div class="login-page">
        <div class="form">
            <form class="register-form">
                <input type="text" placeholder="login"/>
                <input type="password" placeholder="password"/>
                <input type="text" placeholder="e-mail"/>
                <button>create</button>
                <p class="message">Already have an account? <a href="#">Sign in!</a></p>
            </form>
            <form class="login-form">
                <input type="text" placeholder="login"/>
                    <input type="password" placeholder="password"/>
                    <button>Sign in</button>
                    <p class="message">Need an account? <a href="#">Register!</a></p>
            </form>
        </div>
    </div>

这就是我在Codepen上找到的内容，但无法在我的网站上使用它：

<script> $('.message a').click(function(){$('form').animate({height: "toggle", opacity: "toggle"}, "slow");}); </script>

Answer 1

添加一些CSS以隐藏登录表单。

$('.message a').click(
  function() {
    $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
  }
 );

.login-form {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="login-page">
    <div class="form">
        <form class="register-form">
            <input type="text" placeholder="login"/>
            <input type="password" placeholder="password"/>
            <input type="text" placeholder="e-mail"/>
            <button>create</button>
            <p class="message">Already have an account? <a href="#">Sign in!</a></p>
        </form>
        <form class="login-form">
            <input type="text" placeholder="login"/>
                <input type="password" placeholder="password"/>
                <button>Sign in</button>
                <p class="message">Need an account? <a href="#">Register!</a></p>
        </form>
    </div>
</div>

Answer 2

您的脚本可能无法正常工作的一个原因是，将其包含在文档的<head>...</head>中，而不是紧接在结束</body>标记之前。

在这种情况下脚本将失败的原因是由于脚本运行时未加载<body>...</body>。在浏览器的控制台中检查是否有任何错误。

另一个原因可能是您在自定义脚本之后加载了 jQuery。例如：

<script>...</script>
<script src="code.jquery.com/jquery-3.3.1.min.js"></script>

代替：

<script src="code.jquery.com/jquery-3.3.1.min.js"></script>
<script>...</script>

如何使用JavaScript在2种形式之间切换？

2 个答案: