时间戳

首页 > 解决方案 > 当我单击选项卡时 HTML 表单消失？

javascript - 当我单击选项卡时 HTML 表单消失？

问题描述

我正在尝试创建一个包含两个表单的容器。我想一次只显示一个表单。单击各自的选项卡并隐藏另一个表单时，可以访问每个表单。但是当我尝试这样做时，我最终遇到了一种情况，当我单击另一个选项卡以访问第二个表单时，我的两个表单都消失了，只有选项卡保留在屏幕上。

所需的输出将是我应该能够在表单之间切换。

我曾尝试调试，但没有找到我出错的地方。

这是我的 javascript、HTML 和 CSS 代码：

const tabs = document.querySelectorAll(".tab");
const forms = document.querySelectorAll(".form-div");

const removeActiveTab = () =>{
tabs.forEach(tab => tab.classList.remove("active"));
};

const removeActiveForm = () => {
forms.forEach(form => form.classList.remove("current"));
};

function setActiveForm(tab){
removeActiveForm();

forms.forEach(form => {
    if (tab.classList.contains(form.dataset['form'])){
        form.classList.add('current')
    }
});
}


function setActiveTab(tab){
if(!tab.classList.contains("active")){
    removeActiveTab();
    tab.classList.add("active");
}
}


tabs.forEach(tab => {
tab.addEventListener("click", () =>{
    setActiveTab(tab);
    setActiveForm(tab);
});
});
*{
margin : 0;
padding: 0;
box-sizing: border-box;
}


html,
body{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode',  Verdana, sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #e6eeff;
}

.main-div{
background-color:#1a2a4d;
padding: 3rem;
width: 700px;

}
.tabs{
display: flex;
}

.tab{
flex: 1;
text-align: center;
color: #fff;
cursor: pointer;
border: 2px solid #02a1fd;
transition: background 300ms;
}

.tab:hover{
background-color: #02a1fd;
}

.tab:nth-child(1){
border-radius: 25px 0 0 25px;
}

.tab:nth-child(2){
border-radius: 0 25px 25px 0;
}

.tab h2{
padding: .5rem 1rem;
}

.active{
background-color: #02a1fd;
}

.form-div{
display: none;
opacity: 0;
}

.current{
display: block;
animation: fadeIn 500ms ease-in forwards;
}

.form-div h1{
text-align: center;
color: #fff;
padding: 1rem 0;

}

.input{
padding: .5rem 1rem;
}

.input label{
padding: 0.3rem 0.6rem;
font-size: 1.3rem;
color: #fff;
}

.req{
color: #02a1fd;
}

.input input{
width: 100%;
padding: .3rem;
font-size: 1.3rem; 
background-color: transparent;
color: #fff;
border: 1px solid #fff;
outline: 0;
}

.input input:focus{
border: 1px solid #02a1fd;
}

.form-submit{
padding: .5rem 1rem;
}

.form-submit input{
padding: 1rem;
width: 100%;
font-size: 1.5rem;
background-color: #02a1fd;
border: 0;
color: #fff;
}

.form-submit input:hover{
background-color: #02886d;
}


@keyframes fadeIn{
from{
    opacity: 0;
}
to{
    opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">
    <title>Document</title>

</head>

<body>


    <div class="main-div">

        <div class="tabs">
            <div class="tab encryption active"><h2>Encryption</h2></div>
            <div class="tab decryption"><h2>Decryption</h2></div>
        </div>

        <div class="form-div current" data-form="Encryption">
        <h1>Encryption</h1>
        
        <form action="#">
            
            <div class="input">
                <label for="plaintext">Enter Plain text </label>
                <input type="text" id="plaintext">
            </div>

            <div class="input">
                <label for="password">Enter password </label>
                <input type="password" id="password">
            </div>
            
            <div class="form-submit">
                <input type="submit" value="encryption">
            </div>

        </form>

        </div>

        <div class="form-div" data-form="Decryption">
        
            <h1>Decryption</h1>
        
            <form action="#">
        
            <div class="input">
                <label for="decryptiontext">Enter Encrypted text </label>
                <input type="text" id="decryptiontext">
            </div>

            <div class="input">
                <label for="password">Enter password </label>
                <input type="password" id="password">
            </div>

            <div class="input">
                <label for="key">Enter key </label>
                <input type="number" id="key">
            </div>
            
            <div class="form-submit">
                <input type="submit" value="decryption">
            </div>

        </form>
    </div>

</div>

<script src="main.js"></script>

</body>
</html>

提前致谢

标签： javascripthtmlcss

解决方案

问题出在下面一行 -

if (tab.classList.contains(form.dataset['form'])){

在这里，您正在检查选项卡中的类列表是否具有该data-form值。

但是类是小写的（解密，加密），但data-form值是大写的（解密，加密）。这就是条件从不匹配并且current类从不添加到表单的原因。

您可以更改大小写，使其匹配或在匹配时将大小写转换为小写，如下所示 -

if (tab.classList.contains(form.dataset['form'].toLowerCase())) {

最终代码 -

const tabs = document.querySelectorAll(".tab");
const forms = document.querySelectorAll(".form-div");

const removeActiveTab = () => {
  tabs.forEach(tab => tab.classList.remove("active"));
};

const removeActiveForm = () => {
  forms.forEach(form => form.classList.remove("current"));
};

function setActiveForm(tab) {
  removeActiveForm();

  forms.forEach(form => {
    if (tab.classList.contains(form.dataset['form'].toLowerCase())) {
      form.classList.add('current')
    }
  });
}


function setActiveTab(tab) {
  if (!tab.classList.contains("active")) {
    removeActiveTab();
    tab.classList.add("active");
  }
}


tabs.forEach(tab => {
  tab.addEventListener("click", () => {
    debugger;
    setActiveTab(tab);
    setActiveForm(tab);
  });
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: #e6eeff;
}

.main-div {
  background-color: #1a2a4d;
  padding: 3rem;
  width: 700px;
}

.tabs {
  display: flex;
}

.tab {
  flex: 1;
  text-align: center;
  color: #fff;
  cursor: pointer;
  border: 2px solid #02a1fd;
  transition: background 300ms;
}

.tab:hover {
  background-color: #02a1fd;
}

.tab:nth-child(1) {
  border-radius: 25px 0 0 25px;
}

.tab:nth-child(2) {
  border-radius: 0 25px 25px 0;
}

.tab h2 {
  padding: .5rem 1rem;
}

.active {
  background-color: #02a1fd;
}

.form-div {
  display: none;
  opacity: 0;
}

.current {
  display: block;
  animation: fadeIn 500ms ease-in forwards;
}

.form-div h1 {
  text-align: center;
  color: #fff;
  padding: 1rem 0;
}

.input {
  padding: .5rem 1rem;
}

.input label {
  padding: 0.3rem 0.6rem;
  font-size: 1.3rem;
  color: #fff;
}

.req {
  color: #02a1fd;
}

.input input {
  width: 100%;
  padding: .3rem;
  font-size: 1.3rem;
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
  outline: 0;
}

.input input:focus {
  border: 1px solid #02a1fd;
}

.form-submit {
  padding: .5rem 1rem;
}

.form-submit input {
  padding: 1rem;
  width: 100%;
  font-size: 1.5rem;
  background-color: #02a1fd;
  border: 0;
  color: #fff;
}

.form-submit input:hover {
  background-color: #02886d;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

</head>

<body>


  <div class="main-div">

    <div class="tabs">
      <div class="tab encryption active">
        <h2>Encryption</h2>
      </div>
      <div class="tab decryption">
        <h2>Decryption</h2>
      </div>
    </div>

    <div class="form-div current" data-form="Encryption">
      <h1>Encryption</h1>

      <form action="#">

        <div class="input">
          <label for="plaintext">Enter Plain text </label>
          <input type="text" id="plaintext">
        </div>

        <div class="input">
          <label for="password">Enter password </label>
          <input type="password" id="password">
        </div>

        <div class="form-submit">
          <input type="submit" value="encryption">
        </div>

      </form>

    </div>

    <div class="form-div" data-form="Decryption">

      <h1>Decryption</h1>

      <form action="#">

        <div class="input">
          <label for="decryptiontext">Enter Encrypted text </label>
          <input type="text" id="decryptiontext">
        </div>

        <div class="input">
          <label for="password">Enter password </label>
          <input type="password" id="password">
        </div>

        <div class="input">
          <label for="key">Enter key </label>
          <input type="number" id="key">
        </div>

        <div class="form-submit">
          <input type="submit" value="decryption">
        </div>

      </form>
    </div>

  </div>

</body>

</html>

推荐阅读