切换按钮无法正常工作

时间：2020-07-17 10:27:02

标签： javascript html css 

var mylogin = document.getElementById('login'); //form id for login page
var myRegister = document.getElementById('register'); //form id for register page
var mybtn = document.getElementById('btn'); //btn id to perform toggle option


login = () => {
  mylogin.style.left = '50px';
  myRegister.style.left = '500px';
  mybtn.style.left = '0px';
}

register = () => {
  mylogin.style.left = '-450px';
  myRegister.style.left = '50px';
  mybtn.style.left = '110px';
}
* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}


/*to set background container*/

.container {
  height: 115%;
  width: 100%;
  background-image: url('../Images/conifers.jpg');
  position: absolute;
  background-position: center;
}


/*to create white box*/

.form_container {
  width: 380px;
  height: 480px;
  position: relative;
  margin: 6% auto;
  background: whitesmoke;
  padding: 5px;
  overflow: hidden;
}


/*Container to create button on for the shadow effect*/

.button_group {
  width: 220px;
  margin: 34px auto;
  position: relative;
  box-shadow: 0 0 8px 8px darkseagreen;
  border-radius: 30px;
}


/*Button Styling*/

.toggle_btn {
  padding: 10px 25px;
  background: none;
  border: 0;
  outline: none;
  position: relative;
  cursor: pointer;
}


/*style for buttons to toggle*/

#btn {
  top: 0;
  left: 0;
  position: absolute;
  width: 110px;
  height: 100%;
  background: linear-gradient(to right, lightgreen, green);
  border-radius: 30px;
  transition: .5s;
}


/*icons background container*/

.media_icons {
  margin: 30px auto;
  text-align: center;
}


/*icons image style*/

.media_icons img {
  width: 35px;
  margin: 0 12px;
  box-shadow: 0 0 10px 2px olivedrab;
  cursor: pointer;
  border-radius: 50%;
}


/*To style form*/

.form_group {
  top: 180px;
  position: absolute;
  width: 280px;
  transition: .5s;
}


/*for input type=text that is textbox*/

.input_area {
  width: 100%;
  padding: 10px 0;
  margin: 5px 0;
  border: 0;
  border-bottom: 1px solid blue;
  outline: none;
  background: none;
}

.check_box {
  margin: 30px 10px 30px 0;
}

span {
  color: rgb(36, 21, 22);
  font-size: 14px;
  bottom: 65px;
}

.sub_btn {
  width: 80%;
  padding: 10px 30px;
  cursor: pointer;
  display: block;
  margin: auto;
  background: linear-gradient(to right, lightgreen, green);
  border-radius: 30px;
  border: 0;
  outline: none;
}

#login {
  left: 50px;
}

#register {
  left: 500px;
}
<div class="container">
  <div class="form_container">
    <div class="button_group">
      <div id="btn"></div>
      <button type="button" class="toggle_btn" onclick="login()">LOGIN</button>
      <button type="button" class="toggle_btn" onclick="register()">REGISTER</button>
    </div>
    <div class="media_icons">
      <img src="~/Images/facebook.png" />
      <img src="~/Images/twitter.png" />
      <img src="~/Images/youtube.jpg" />
      <img src="~/Images/instagram.png" />
    </div>
    <form id="login" class="form-group">
      <input type="text" class="input_area" placeholder="UserName" required/>
      <input type="password" class="input_area" placeholder="Password" required />
      <input type="checkbox" class="check_box" /><span>Remenber Me</span>
      <button type="submit" class="sub_btn">LOGIN</button>
    </form>
    <form id="register" class="form-group">
      <input type="text" class="input_area" placeholder="UserName" required />
      <input type="text" class="input_area" placeholder="Enter Email" required />
      <input type="text" class="input_area" placeholder="Enter Password" required />
      <input type="checkbox" class="check_box" />
      <span>I agree with all the terms and conditions </span>
      <button type="submit" class="sub_btn">REGISTER</button>
    </form>
  </div>
</div>

我找不到错误。切换按钮不能正常工作。登录和注册页面一个又一个地出现。请帮助我找到错误。切换应该作为登录按钮来显示登录页面，注册按钮来显示注册表。

2 个答案:

答案 0 :(得分：0)

我更改了以下代码

#login {
  left: 50px;
}

#register {
  left: 500px;
}

与此

#login {
    left: 50px;
    position: relative;
}

 #register {
   left: 500px;
   top: 150px;
   position: absolute;
 }

我给了#login position: relative;，以保持容器高度，但是现在您可以使用left

我给了#register position: absulute;，所以您可以将其放置在#login过去的拨动位置

var mylogin = document.getElementById('login'); //form id for login page
var myRegister = document.getElementById('register'); //form id for register page
var mybtn = document.getElementById('btn'); //btn id to perform toggle option


login = () => {
  mylogin.style.left = '50px';
  myRegister.style.left = '500px';
  mybtn.style.left = '0px';
}

register = () => {
  mylogin.style.left = '-450px';
  myRegister.style.left = '50px';
  mybtn.style.left = '110px';
}
* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}


/*to set background container*/

.container {
  height: 115%;
  width: 100%;
  background-image: url('../Images/conifers.jpg');
  position: absolute;
  background-position: center;
}


/*to create white box*/

.form_container {
  width: 380px;
  height: 480px;
  position: relative;
  margin: 6% auto;
  background: whitesmoke;
  padding: 5px;
  overflow: hidden;
}


/*Container to create button on for the shadow effect*/

.button_group {
  width: 220px;
  margin: 34px auto;
  position: relative;
  box-shadow: 0 0 8px 8px darkseagreen;
  border-radius: 30px;
}


/*Button Styling*/

.toggle_btn {
  padding: 10px 25px;
  background: none;
  border: 0;
  outline: none;
  position: relative;
  cursor: pointer;
}


/*style for buttons to toggle*/

#btn {
  top: 0;
  left: 0;
  position: absolute;
  width: 110px;
  height: 100%;
  background: linear-gradient(to right, lightgreen, green);
  border-radius: 30px;
  transition: .5s;
}


/*icons background container*/

.media_icons {
  margin: 30px auto;
  text-align: center;
}


/*icons image style*/

.media_icons img {
  width: 35px;
  margin: 0 12px;
  box-shadow: 0 0 10px 2px olivedrab;
  cursor: pointer;
  border-radius: 50%;
}


/*To style form*/

.form_group {
  top: 180px;
  position: absolute;
  width: 280px;
  transition: .5s;
}


/*for input type=text that is textbox*/

.input_area {
  width: 100%;
  padding: 10px 0;
  margin: 5px 0;
  border: 0;
  border-bottom: 1px solid blue;
  outline: none;
  background: none;
}

.check_box {
  margin: 30px 10px 30px 0;
}

span {
  color: rgb(36, 21, 22);
  font-size: 14px;
  bottom: 65px;
}

.sub_btn {
  width: 80%;
  padding: 10px 30px;
  cursor: pointer;
  display: block;
  margin: auto;
  background: linear-gradient(to right, lightgreen, green);
  border-radius: 30px;
  border: 0;
  outline: none;
}

#login {
  left: 50px;
  position: relative;
}

#register {
  left: 500px;
  top: 150px;
  position: absolute;
}
<div class="container">
  <div class="form_container">
    <div class="button_group">
      <div id="btn"></div>
      <button type="button" class="toggle_btn" onclick="login()">LOGIN</button>
      <button type="button" class="toggle_btn" onclick="register()">REGISTER</button>
    </div>
    <div class="media_icons">
      <img src="~/Images/facebook.png" />
      <img src="~/Images/twitter.png" />
      <img src="~/Images/youtube.jpg" />
      <img src="~/Images/instagram.png" />
    </div>
    <form id="login" class="form-group">
      <input type="text" class="input_area" placeholder="UserName" required />
      <input type="password" class="input_area" placeholder="Password" required />
      <input type="checkbox" class="check_box" /><span>Remenber Me</span>
      <button type="submit" class="sub_btn">LOGIN</button>
    </form>
    <form id="register" class="form-group">
      <input type="text" class="input_area" placeholder="UserName" required />
      <input type="text" class="input_area" placeholder="Enter Email" required />
      <input type="text" class="input_area" placeholder="Enter Password" required />
      <input type="checkbox" class="check_box" />
      <span>I agree with all the terms and conditions </span>
      <button type="submit" class="sub_btn">REGISTER</button>
    </form>
  </div>
</div>

答案 1 :(得分：0)

1。首先，将显示内容不添加到ID 

 #register{
  display:none;
}
 #login{
  display:block;
}

  1. 然后在文件js中，只需单击一下即可更改样式显示。

    login = () => {
     mylogin.style.left = '50px';
     myRegister.style.left = '500px';
     mybtn.style.left = '0px';
     mylogin.style.display='block'
   myRegister.style.display='none'
 }

 register = () => {
     mylogin.style.left = '-450px';
     myRegister.style.left = '50px';
     mybtn.style.left = '110px';
   myRegister.style.display='block'
   mylogin.style.display='none'

 }
相关问题
最新问题