css: jquery login status control

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="">QQa>
                        i>i>a href="">微博a>
                    div>
                    p>
                        我已阅读并接受
                        a href="">《房产在线服务协议》a>及
                        a href="">《隐私权政策》a>
                    p>
                dd>
            div>
        div>
    div>
body>

.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;
}

$(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‘)
            }
        })
    })