Question

当前，我有一个This is how it looks like这样的登录表单：

<body>
    
    <div class="wrapper fadeInDown">
        <div id="formContent">
    <!-- Tabs Titles -->
    <h2 class="active"> Sign In </h2>
    <h2 class="inactive underlineHover">Sign Up </h2>

    <!-- Icon -->
    <div class="fadeIn first">
      <img src="abc-logo.png" id="icon" alt="User Icon" style='height: 25%; width: 25%; object-fit: contain' />
    </div>

    <!-- Login Form -->
    <form>
      <input type="text" id="login" class="fadeIn second" name="login" placeholder="login">
      <input type="text" id="password" class="fadeIn third" name="login" placeholder="password">
      <input type="submit" class="fadeIn fourth" value="Log In">
    </form>

    <!-- Remind Passowrd -->
    <div id="formFooter">
      <a class="underlineHover" href="#">Forgot Password?</a>
    </div>

  </div>
</div>
    
</body>

如何添加某种“切换功能（？）”，当用户按下“注册”时，显示插入了注册框？

Answer 1

您可以使用标签页尝试一下，

/*
 CSS for the main interaction
*/
.tabset > input[type="radio"] {
  position: absolute;
  left: -200vw;
}

.tabset .tab-panel {
  display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
  display: block;
}

/*
 Styling
*/
body {
  font: 16px/1.5em "Overpass", "Open Sans", Helvetica, sans-serif;
  color: #333;
  font-weight: 300;
}

.tabset > label {
  position: relative;
  display: inline-block;
  padding: 15px 15px 25px;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
  font-weight: 600;
}

.tabset > label::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 10px;
  width: 22px;
  height: 4px;
  background: #8d8d8d;
}

.tabset > label:hover,
.tabset > input:focus + label {
  color: #06c;
}

.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
  background: #06c;
}

.tabset > input:checked + label {
  border-color: #ccc;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}

.tab-panel {
  padding: 30px 0;
  border-top: 1px solid #ccc;
}

/*
 Demo purposes only
*/
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  padding: 30px;
}

.tabset {
  max-width: 65em;
}

<div class="tabset">
  <!-- Tab 1 -->
  <input type="radio" name="tabset" id="tab1" aria-controls="marzen" checked>
  <label for="tab1">Märzen</label>
  <!-- Tab 2 -->
  <input type="radio" name="tabset" id="tab2" aria-controls="rauchbier">
  <label for="tab2">Rauchbier</label>
  
  <div class="tab-panels">
    <section id="marzen" class="tab-panel">
      <h2>Login page</h2>
      
  </section>
    
    <section id="dunkles" class="tab-panel">
      <h2>Sign up</h2>
      
    </section>
  </div>
  
</div>

Answer 2

首先，您需要登录并注册文本以使其成为按钮，然后需要进行两个div操作，首先将包含您的登录部分和第二个登录部分，并在注册div display: none;处添加并且您可以将javascript与“添加事件监听器”一起使用到“注册”按钮，基本上，当您单击“注册”按钮时，“登录”框将消失并显示“注册”框。这样的事情。

let signInButton = document.querySelector(".firstButton");
let signUpButton = document.querySelector(".secondButton");

let signIn = document.querySelector(".firstBox"); // firstBox is the class of sign in div you can add which name you want
let signUp = document.querySelector(".secondBox");

signUpButton.addEventListener("click", () => {
  signIn.style.display = "none";
  signUp.style.display = "block";
  
})

signInButton.addEventListener("click", () => {
  signUp.style.display = "block";
  signIn.style.display = "block";
})

还可以添加一些动画使其更流畅。

为了让您更清楚地了解，querySelector中的类不存在，您需要使用一些类创建自己的div，然后在JS代码上对其进行更改。

Answer 3

您可以使用Javascript这样操作：

在“登录表单”下面，您在“登录表单”和“注册表单”的元素周围添加了div，并为“注册表单”添加了属性style="display:none"以将其隐藏。

<!-- Login Form -->
<div id=loginElements>
 <form>
  
    <input type="text" id="login" class="fadeIn second" name="login" placeholder="login">
    <input type="text" id="password" class="fadeIn third" name="login" placeholder="password">
    <input type="submit" class="fadeIn fourth" value="Log In">
 </form>
</div>
<div id=signupElements style="display:none">
 <form>
    <input type="text" id="signup" class="fadeIn second" name="signup" placeholder="signup">
    <input type="text" id="signupPassword" class="fadeIn third" name="signupPassword" placeholder="password" style="display:none">
    <input type="submit" class="fadeIn fourth" value="Sign Up">
 </form>
</div>

，然后将onclick函数添加到选项卡标题中以更改显示的内容。隐藏登录表单并显示注册表单的示例：

<h2 class="inactive underlineHover" onclick=showSignUp()>Sign Up </h2>

并像这样实现它：

function showSignUp() {
  // Hide login form
  var loginElements = document.getElementById("loginElements");
  loginElements.setAttribute('style', 'display:none');

  // Display signup form
  var signupElements = document.getElementById("signupElements");
  signupElements.setAttribute('style', '');
}

您可以实现隐藏“注册表单”并显示类似于“登录表单”的功能。另外，您可能需要更改选项卡标题的类别，以便正确的选项卡显示为活动状态。这也与上面的代码非常相似，只需要给它们提供id，就可以使用Javascript访问元素，然后使用.setAttribute('class', 'active');来设置正确的类。

在同一页面上登录/注册

3 个答案: