zoukankan      html  css  js  c++  java
  • 标签点击效果切换+内容切换

    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 {
       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;
       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");
    }
  • 相关阅读:
    Mac环境下svn的使用
    开发中常见问题集锦
    【C语言】07基本语句和运算
    【C语言】05printf和scanf函数
    【C语言】03第一个C程序代码分析
    【C语言】06基本数据类型
    【C语言】04函数
    【C语言】01C语言概述
    让UIWebView弹出键盘上的按钮显示中文
    【C语言】02第一个C程序
  • 原文地址:https://www.cnblogs.com/huanglp/p/8962290.html
Copyright © 2011-2022 走看看