标签点击效果切换+内容切换

Posted 2020-11-01 好名字被谁用了

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