登录——选项卡

login

css

<style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-image: url();
            background-repeat: repeat;
        }
        /*改变input里的placeholder属性默认颜色*/
        input::-webkit-input-placeholder{
            color:blueviolet;
        }
        #test{
            width: 400px;
            margin: 110px auto;
            background: rgba(11,11,11,.7);
            overflow: hidden;
            border-radius: 35px;
        }
        .comment{
            margin: 50px 70px;
            width: 260px;
        }
        .comment ul{
            list-style: none;
        }
        .comment ul li{
            font-size: 27px;
            float: left;
            width: 55px;
            cursor: pointer;
        }
        .comment ul span{
            float: left;
            font-size: 27px;
            width: 10px;
        }
        .inp input{
            border: none;
            outline: none;
            background: transparent;
            border-bottom: 3px solid royalblue;
            width: 85%;
            height: 40px;
            font-size: 19px;
            margin-bottom: 20px;
        }
        /*按钮的样式*/
        .btn{
            border: none;
            outline: none;
            margin-left: 80px;
            width: 70px;
            height: 70px;
            border-radius:35px;
            margin-top: 10px;
            box-shadow: 0px 0px 5px 7px royalblue;
        }
        .btn:hover{
            box-shadow: 0px 0px 15px inset royalblue;
        }
        .wj{
            color: violet;
            display: block;
            margin-top: 20px;
            cursor: pointer;
        }
        /*选中后的li标签*/
        .liActive{
            color:royalblue;
        }
        .content{
            margin-top: 20px;
            display: none;
        }
        /*显示隐藏的内容*/
        .isshow{
            display: block;
        }
    </style>

html

<div id="test">
    <div class="comment">
        <ul>
            <li class="liActive">登录</li>
            <span>/</span>
            <li>注册</li>
        </ul><br /><br />
        <div class="content isshow">
            <form>
                <div class="inp">
                    <input type="text" placeholder="用户名">
                </div>
                <div class="inp">
                    <input type="password" placeholder="密码">
                </div>
                <span class="wj">忘记密码？</span><br />
                <button class="btn" type="submit">登录</button>
            </form>
        </div>
        <div class="content">我是第二部分</div>
    </div>

</div>

js

<script src="jquery-1.12.4.min.js"></script>
<script>
    var timeoutid
    $(()=>{
        $(".comment ul li").each(function (index) {
            $(this).click(()=>{
                var liNode=$(this)
                timeoutid=setTimeout(()=>{
                    $(".isshow").removeClass("isshow")
                    $(".liActive").removeClass("liActive")
                    $(".content:eq("+index+")").addClass("isshow")
                    $(liNode).addClass("liActive")
                },100)
            }).mouseout(()=>{
                clearTimeout(timeoutid)
            })
        })
        $(".wj").click(()=>{
            $(".isshow").removeClass("isshow")
            $(".liActive").removeClass("liActive")
            $(".content:eq("+1+")").addClass("isshow")
            $(".comment ul li:eq("+1+")").addClass("liActive")
        })
    })
</script>