1. Effect column
After clicking switch
2.
<div class="register-title" id="register-Personal-Corporate" style="margin-left: 300px"> <a class ="register active" id="Personal" onclick="PersonalUserRegistration()"> <span>I am a personal user</span></a> <a class ="register " id="Corporate" onclick="CorporateUserRegistration()"> <span>I am a corporate user</span></a> </div>
3.css configuration
.reg_main .form_box_Personal { padding: 50px 300px; } .form_box_Personal button { width: 400px; height: 60px; border: none; background: #e45050; color: #fff; font-size: 22px; margin-top: 30px; cursor: pointer; } .register-title{ } .register-title a.register{ margin-left: 20px; height: 50px; line-height: 50px; } .register-title .active { color: #f5f5f5; background-color: #01b382; border: 1px solid #01b382; } .register-title a { display: inline-block; position: relative; vertical-align: top; width: 110px; border: 1px solid #eee; border-radius: 4px; text-align: center; cursor: pointer; font-size: 14px; }
4. Function when clicked
function PersonalUserRegistration() { $( ".form_box_Personal" ).show(); Show different interfaces $(".form_box").hide(); $("#Personal").removeClass("active"); 移除active $("#Corporate").removeClass("active"); $("#Personal").addClass("active"); 添加active } function CorporateUserRegistration() { $(".form_box_Personal").hide(); $(".form_box").show(); $("#Personal").removeClass("active"); $("#Corporate").removeClass("active"); $("#Corporate").addClass("active"); }