我试图让包含登录表单的 div 在单击“创建帐户” anchor 时消失，然后我希望能够通过单击注册表单上的“登录” anchor 来反转该过程Jquery。
我认为我正确链接了 Jquery 和 head 中的 Js 文件。
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="script/jquery-3.1.1.js"></script>
<script src="script/javascript.js"></script>
</head>
这是新的 html
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? <a href="" class="signin">Sign In</a></p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? <a href="" class="create">Create an account</a></p>
</form>
</div>
这是新的 javascript.js
$(document).ready(function(){
$('a.signin').on("click", function(e) {
e.preventDefault();
$('.register-form').fadeOut();
$('.login-form').fadeIn();
});
$('a.create').on("click", function(e) {
e.preventDefault();
$('.login-form').fadeOut();
$('.register-form').fadeIn();
});
)};
顺便说一句，单击 anchor 不会执行任何操作。
任何帮助将不胜感激，提前致谢!
最佳答案
将您的 HTML 更改为此(我已为每个 anchor 添加了一个类)。
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? <a href="#" class="signin">Sign In</a></p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? <a href="#" class="create">Create an account</a></p>
</form>
</div>
然后将你的 jQuery 替换为此...
$('a.signin').on("click", function(e) {
e.preventDefault();
$('.register-form').fadeOut();
$('.login-form').fadeIn();
});
$('a.create').on("click", function(e) {
e.preventDefault();
$('.login-form').fadeOut();
$('.register-form').fadeIn();
});
使用.on() jQuery 中的函数。对于点击等事件来说效果要好得多。
关于javascript - Jquery 不透明度切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42719389/