注册登录都在一个页面，点击注册显示注册隐藏登录表单，点击登录显示登录隐藏注册表单

功能：

1、html实现注册和登录的表单都在一个页面

2、点击注册，注册页面显示，登录页面隐藏；

3、点击登录，出现登录页面，注册页面隐藏

---

页面效果如下

---

html页面

    <!-- logo -->
    <div class="row">
        <img src="../image/logo.png" class="mylogo" />
    </div>
    <!-- logo -->
    <!--注册、登录  -->
    <form role="form">
        <table class="table">
            <div class="row">
                <div class="col-xs-6" >
                    <h1 onclick="blockornone('regedit_div')" id="t_reg">注册<h1>
                    </div>
               <div class="col-xs-6" >
                 <h1 onclick="blockornone('login_div')"  id="t_log">登录</h1>
               </div>
            </div>
            <tbody id="regedit_div">
                <tr>
                    <td>用户名</td>
                    <td><input type="text" placeholder="输入用户名" name="username" /></td>
                </tr>
                <tr>
                    <td>输入密码</td>
                    <td><input type="password" name="password" /></td>
                </tr>
                <tr>
                    <td>再次输入密码</td>
                    <td><input type="password" name="gpassword" /></td>
                </tr>
                <tr>
                    <td colspan="2"><input type="submit" value="注册" /></td>
                </tr>
            </tbody>
            <tbody id="login_div">
                <tr>
                    <td>用户名</td>
                    <td><input type="text" placeholder="输入用户名" name="username" /></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password" name="password" /></td>
                </tr>
                <tr>
                    <td colspan="2"><input type="submit" value="登录" /></td>
                </tr>
            </tbody>
        </table>
    </form>
  

css代码

*这个是Login.html里面的内容*/
.mylogo{
height:100%;
width:100%;
}
#login_div{
position: absolute;
width: 100%;
display: none;
}
#regedit_di{
position: absolute;
width: 100%;
}

---

js代码

function blockornone(id){
  alert("id:"+id);
  // login.html里面的内容
  //显示传过来的值
  if(id=="regedit_div"){
    //显示注册，隐藏登录
      document.getElementById(id).style.display='block';
      document.getElementById("login_div").style.display='none';
      document.getElementById("t_reg").style.color='#1ba71b';
      document.getElementById("t_log").style.color='gray';
  }
  if(id=="login_div"){
      //显示登录，隐藏注册
document.getElementById(id).style.display='block';
document.getElementById("regedit_div").style.display='none';
document.getElementById("t_reg").style.color='gray';
document.getElementById("t_log").style.color='#1ba71b';
  }
  //my.html里面的内容
}

---