点击输入框变色

//html

 <div class="row-input">
        <span class="lab">邮箱：</span>
                <input type="text" class="text text-input-before" name="contact" placeholder="请输入您的邮箱"> <span class="msg-box n-right" style="display: none;" for="contact"></span>
</div>

//css

.row-input .text-input-before{
    border: 1px solid #d7d7d7;
}
.row-input .text-input-after{
    border: 1px solid #2277e6;
}

//jquery

$('.text').on('click',function(e){

    e.preventDefault();
    var $this = $(this),
        $parent = $this.closest('.row-input');
    $this.addClass('text-input-after').removeClass('text-input-before');
    $parent.siblings().find('.text').addClass('text-input-before').removeClass('text-input-after');
});