JS之单页面登录注册

实现思路：通过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:效果图