实现思路:通过js控制display的none和block
1:html
<div class="form">
<!--1:切换登录注册按钮-->
<ul class="tab-group">
<li class="tab active"><a href="#">REGISTER</a></li>
<li class="tab"><a href="#">LOGIN</a></li>
</ul>
<!--1:需要切换的面板-->
<div class="tab-content">
<!--2:注册面板-->
<div id="register">
<h1>REGISTER</h1>
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label>Name</label>
<input type="text" required autocomplete="off" />
</div>
</div>
<div class="field-wrap">
<label>Email Address</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>Set A Password</label>
<input type="password"required autocomplete="off"/>
</div>
<button type="submit" class="button button-block"/>Get Started</button>
</form>
</div>
<!--2:登录面板-->
<div id="login">
<h1>LOGIN</h1>
<form action="/" method="post">
<div class="field-wrap">
<label>Email Address</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>Password</label>
<input type="password"required autocomplete="off"/>
</div>
<p>
<input type="checkbox" value="" name="ok" >
<label>Remember Me</label>
</p>
<button class="button button-block"/>Log In</button>
</form>
</div>
</div>
</div>
2:css
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body{
background: #c1bdba;
}
.form{
background: rgba(57, 71, 97, 0.9);
padding: 40px;
max-width: 600px;
margin: 60px auto;
border-radius: 4px;
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}
ul{
margin: 0 0 40px 0;
}
ul li{
list-style: none;
display: inline-block;
width: 49%;
}
li a:hover{
background-color: #9ecaff;
}
ul li a {
display: block;
padding: 15px;
background: #5c83b7;
color: #d8f2ee;
font-size: 20px;
float: left;
width: 90%;
overflow: hidden;
text-align: center;
cursor: pointer;
-webkit-transition: .5s ease;
transition: .5s ease;
}
.field-wrap{
margin-bottom: 20px;
}
.field-wrap input {
font-size: 22px;
background: none;
/*去除输入框白色底*/
display: block;
width: 100%;
height: 5%;
padding: 6px 0px;
/*控制输入框大小*/
border: 2px solid #a0b3b0;
color: #ffffff;
border-radius: 3px;
}
.field-wrap input:focus {
outline: 0;
/*阻止输入框自带的聚焦颜色*/
border-color: #9ecaff;
}
h1 {
text-align: center;
color: #ffffff;
font-weight: 300;
}
label{
color: #d8f2ee;
}
.button {
width: 100%;
margin: 20px auto;
display: block;
border: 0;
outline: none;
border-radius: 0;
padding: 15px 0;
font-size: 2rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .1em;
background: #5c83b7;
color: #ffffff;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.button:hover {
background-color: #9ecaff;
}
#register{
display: none;
}
#login{
display: block;
}
3: js
//获取切换面板
var tabs=document.getElementsByClassName("tab");
//获取显示和隐藏的div
var register=document.getElementById("register");
var login=document.getElementById("login");
//显示注册
tabs[0].onclick=function () {
register.style.display="block";
login.style.display="none";
};
//显示登录
tabs[1].onclick=function () {
register.style.display="none";
login.style.display="block";
}
4:效果图