html - 如何在单击网站中的按钮时使某些元素代替其他元素可见？

Question

我正在尝试制作一个登录和注册表单，默认情况下只将用户名和密码作为输入，当用户按下登录按钮时，必须采用新的一组输入，如名字、姓氏、出生日期等。我试图编写代码以实现相同的目的，但它不起作用..

#form{
  width: 300px;
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 3px solid rgb(6, 61, 30);
  padding: 20px;
  border-radius: 30px;
  background-color: #e4e1ff;
}

.butts{
  display: flex;
  justify-content: center;
  position: relative;
}

#form .butt{
  width: 150px;
  height: 50px;
  font-size: 25px;
  display: inline-block;
  background-color: #e4e1ff;
  border: none;
}

hr{
  height: 4px;
  width: 150px;
  margin: 0;
  background: tomato;
  border: none;
  transition: 0.2s ease-in-out;
  position: absolute;
  left: 0px;
  bottom: 0px;
}

#butt1:focus ~ hr{
  left: 0;
}

#butt2:focus ~ hr{
  left: 50%;
}

#login_form{
  margin-top: 20px;
}

#login_form input{
  width: 300px;
  height: 50px;
  font-size: 20px;
  margin-bottom: 10px;
  border-radius: 20px;
}

#signup_form{
  display: none;
}

#butt2:focus ~ #signup_form{
  display: block;
}

#butt2:focus ~ #login_form{
  display: none;
}

<section id="form">
  <div class="butts">
    <button class="butt" id="butt1">Login</button>
    <button class="butt" id="butt2">Sign Up</button>
    <hr>
  </div>
  <div id="login_form">
    <input type="text" placeholder="username">
    <input type="password" placeholder="password">
  </div>
  <div id="signup_form">
    <input type="text" placeholder="First Name">
    <input type="text" placeholder="Last Name">
    <input type='date' placeholder="Birthdate">
    <input type='text' placeholder="username">
    <input type="password" placeholder="password">
    <input type="password" placeholder="confirm password">
    <button>Connect Github</button>
    <button>Create Account</button>
  </div>
</section>

标签： htmlcssformswebbutton

Answer 1

function formSwitch(){
   var lf=document.getElementById('login_form');
   var sf=document.getElementById('signup_form');

   if(event.target.id == "butt1"){
      lf.style.display='block';
      sf.style.display='none';
   }else{
       lf.style.display='none';
       sf.style.display='block'; 
   }
}

#form{
    width: 300px;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 3px solid rgb(6, 61, 30);
    padding: 20px;
    border-radius: 30px;
    background-color: #e4e1ff;
}

.butts{
    display: flex;
    justify-content: center;
    position: relative;
}

#form .butt{
    width: 150px;
    height: 50px;
    font-size: 25px;
    display: inline-block;
    background-color: #e4e1ff;
    border: none;

}


hr{
    height: 4px;
    width: 150px;
    margin: 0;
    background: tomato;
    border: none;
    transition: 0.2s ease-in-out;
    position: absolute;
    left: 0px;
    bottom: 0px;

}

#butt1:focus ~ hr{
    left: 0;
}

#butt2:focus ~ hr{
    left: 50%;
    
}

#login_form{
    margin-top: 20px;
}

#login_form input{
    width: 300px;
    height: 50px;
    font-size: 20px;
    margin-bottom: 10px;
    border-radius: 20px;
}

#signup_form{
    display: none;
}

#butt2:focus ~ #signup_form{
    display: block;
}

#butt2:focus ~ #login_form{
    display: none;
}

<section id="form">
    <div class="butts">
        <button class="butt" id="butt1" onClick="formSwitch()">Login</button>
        <button class="butt" id="butt2" onClick="formSwitch()">Sign Up</button>
        <hr/>
    </div>
    <div id="login_form">
        <input type="text" placeholder="username">
        <input type="password" placeholder="password">
    </div>
    <div id="signup_form">
        <input type="text" placeholder="First Name">
        <input type="text" placeholder="Last Name">
        <input type='date' placeholder="Birthdate">
        <input type='text' placeholder="username">
        <input type="password" placeholder="password">
        <input type="password" placeholder="confirm password">
        <button>Connect Github</button>
        <button>Create Account</button>
    </div>
</section>