Tab click effect switching + content switching

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");
}