css: jquery login status control

tianzyc

2020-06-13

html:

<body>
    <div class="login-wrap">
        <div class="box-login">
            <div class="login-form">
                <dt class="login-tab">
                    <span class="actived">手机动态码登录</span>
                    <span>账号密码登录</span>
                </dt>
                <dd>
                    <p class="login-phone">
                        <i></i>
                        <input type="text" placeholder="请输入手机号码">
                    </p>
                    <p class="login-code clearfix">
                        <i></i>
                        <input type="text" placeholder="验证码">
                        <em>
                            <a href="">获取验证码</a>
                        </em>
                    </p>
                </dd>
                <dd class="hide">
                    <p class="login-account">
                        <i></i>
                        <input type="text" placeholder="请输入登录账号">
                    </p>
                    <p class="login-pass clearfix">
                        <i></i>
                        <input id="login-pass" type="password" placeholder="密码">
                        <i class="eyes-icon close"></i>
                    </p>
                </dd>
                <div class="login-item clearfix">
                    <label for="loginAuto" class="fl">
                        <input type="checkbox" checked="true">自动登录

                    </label>
                    <a href="" class="fr register">免费注册</a>
                    <a href="" class="fr">忘记密码</a>
                </div>
                <a href="">登录</a>
            </div>
            <div class="login-third">
                <dt>
                    <span>第三方登录方式</span>
                </dt>
                <dd>
                    <div class="third-link">
                        <i></i><a href="">微信</a>
                        <i></i><a href="">QQ</a>
                        <i></i><a href="">微博</a>
                    </div>
                    <p>
                        我已阅读并接受
                        <a href="">《房产在线服务协议》</a>及
                        <a href="">《隐私权政策》</a>
                    </p>
                </dd>
            </div>
        </div>
    </div>
</body>

css:

.login-wrap {
    position: relative;
    height: 706px;
    margin-top: 100px;
    background: url("../../images/login_bg.jpg") no-repeat center center;
}

.box-login {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 450px;
    height: 400px;
    box-shadow: 0 0 6px 2px rgba(0,0,0,0.23);
    background-color: #fff;
    z-index: 999;
}

.box-login>.login-form{
    min-height: 240px;
    padding: 30px 35px 20px 35px;
}

.box-login>.login-form>.login-tab {
    text-align: center;
}

.box-login>.login-form>.login-tab span {
    font-size: 16px;
    padding: 12px;
    font-weight: bold;
}

.box-login>.login-form>.login-tab span.actived {
    color: #1da838;
}

.box-login>.login-form dd p {
    width: 380px;
    height: 40px;
    background-color: #f0f0f0;
    margin-top: 20px;
    border-radius: 2px;
}

.box-login>.login-form dd p input {
    border: 0;
    width: 80%;
    height: 40px;
    background-color: #f0f0f0;
}

.box-login>.login-form dd .login-code input{
    width: 180px;
}

.box-login>.login-form dd .login-code em {
    float: right;
    width: 123px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
}

.box-login>.login-form dd .login-code em a {
    display: block;
    width: 110px;
    height: 38px;
    margin-left: 10px;
    color: #fff;
    background-color: #1da838;
}

.box-login>.login-form>a:hover,
.box-login>.login-form dd .login-code em a:hover {
    background-color: #14922d;
}

.box-login>.login-form .login-item {
    height: 35px;
    line-height: 35px;
    margin: 10px 0;
}

.box-login>.login-form .login-item .register{
    color: #1da838;
    padding-left: 10px;
}

.box-login>.login-form .login-item a:hover {
    color: #666;
}

.box-login>.login-form .login-item input[type=checkbox]{
    vertical-align: -1px;
}

.box-login>.login-form>a{
    display: block;
    width: 380px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #1da838;
    color: #fff;
    border-radius: 2px;
}

/*第三方登录*/
.box-login>.login-third {
    font-size: 12px;
    text-align: center;
    padding: 10px 35px 25px 35px;
    color: #666;
}

.box-login>.login-third dt {
    border-top: 1px solid #e6e6e6;
}

.box-login>.login-third dt span{
    display: block;
    width: 120px;
    margin: 0 auto;
    font-size: 12px;
    background-color: #fff;
    color: #999;
    margin-top: -10px;
}

.box-login>.login-third dd p,
.box-login>.login-third dd .third-link {
    margin: 10px 0;
}

.box-login>.login-third dd p a {
    color: #6B91B3;
}

.box-login>.login-third dd .third-link a{
    margin: 0 5px;
    color: #666;
}

.box-login>.login-third dd a:hover {
    color: #DF2F2F;
}

/*登录icon*/
.box-login>.login-form>dd>p>i{
    float: left;
    width: 20px;
    height: 20px;
    margin: 10px 10px;
}

.box-login>.login-form .login-pass {
    position: relative;
}

.box-login>.login-form .login-pass .eyes-icon {
    position: absolute;
    right: 5px;
    top: 0;
    width: 20px;
    height: 20px;
    margin: 10px 10px;
}

.box-login>.login-form .login-pass .eyes-icon.close{
    background: url("../../images/login_sprites.png") -10px -50px;
}

.box-login>.login-form .login-pass .eyes-icon.open{
    background: url("../../images/login_sprites.png") -50px -50px;
}

.box-login>.login-form .login-phone i {
    background: url("../../images/login_sprites.png") -10px -90px;
}

.box-login>.login-form .login-code i {
    background: url("../../images/login_sprites.png") -50px -10px;
}

.box-login>.login-form .login-account i {
    background: url("../../images/login_sprites.png") -90px -50px;
}

.box-login>.login-form .login-pass>i {
    background: url("../../images/login_sprites.png") -90px -10px;
}

js:

$(document).ready(function () {
        $(‘.login-form .login-tab span‘).each(function (index) {
            $(this).click(function () {
                $(‘.hide‘).removeClass(‘hide‘)
                $(‘.actived‘).removeClass(‘actived‘)
                $(‘.login-form dd‘).eq(index-1).addClass(‘hide‘)
                $(this).addClass(‘actived‘)
            })
        })

        $(‘.eyes-icon‘).click(function() {
            var _this = $(this)
            //获取同级兄弟input当前的密码框
            var _input=_this.siblings(‘#login-pass‘);
            if (_this.hasClass(‘close‘)){
                _this.removeClass(‘close‘)
                _this.addClass(‘open‘)
                _input.attr(‘type‘, ‘text‘)
            } else {
                _this.removeClass(‘open‘)
                _this.addClass(‘close‘)
                _input.attr(‘type‘, ‘password‘)
            }
        })
    })

jquery css