1.效果 列

點擊切換後

2.

    <div class="register-title" id="register-Personal-Corporate" style="margin-left: 300px">
            <a class="register active"  id="Personal" onclick="PersonalUserRegistration()"> <span>我是個人用戶</span></a>
            <a class="register "  id="Corporate" onclick="CorporateUserRegistration()"> <span>我是企業用戶</span></a>
        </div>

3.css配置

.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 PersonalUserRegistration() {
        $(".form_box_Personal").show();　　　　　　展示不同的界面
        $(".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");
}

標簽點擊效果切換+內容切換