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

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 个解决方案

解决方案1
0 2019-01-17 01:35:50

解决方案2
0 已采纳 2019-01-17 01:38:40

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

问题描述

2 个解决方案

解决方案1 0 2019-01-17 01:35:50

解决方案2 0 已采纳 2019-01-17 01:38:40

解决方案1
0 2019-01-17 01:35:50

解决方案2
0 已采纳 2019-01-17 01:38:40