HTML-форма исчезает, когда я нажимаю на вкладку?

ProgramBox

HTML-форма исчезает, когда я нажимаю на вкладку?

Post author:admin
Запись опубликована:6 августа, 2022
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь создать контейнер, содержащий две формы.Я хочу показывать только одну форму за раз. К каждой форме можно получить доступ при нажатии на соответствующую вкладку и скрыть другую форму. Но когда я попытался это сделать, я оказался в ситуации, когда, когда я нажимаю на другую вкладку, чтобы получить доступ ко 2-й форме, обе мои формы исчезли, и на экране остаются только вкладки.

Желаемым результатом будет то, что я должен иметь возможность переключаться между формами.

Я пытался отлаживать, но не понял, где я ошибаюсь.

Вот мой код 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>

Развернуть фрагмент

Заранее спасибо

Ответ №1:

Проблема в строке ниже —

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>

Развернуть фрагмент

Ответ №2:

Альтернативный способ выполнить задание — просто установите отображение стиля из block в none (и наоборот) :

 $("#enx").click(function(){

document.getElementById("eny").style.display = "block";

document.getElementById("dey").style.display = "none";

});


$("#dex").click(function(){

document.getElementById("eny").style.display = "none";

document.getElementById("dey").style.display = "block";

});

 *{
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;
}
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<!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 id=enx class="tab encryption active"><h2>Encryption</h2></div>
            <div id=dex class="tab decryption"><h2>Decryption</h2></div>
        </div>

        <div id=eny 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 id=dey class="form-div current" style="display:none;" 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>

Развернуть фрагмент

Метки: HTML-форма исчезает когда я нажимаю на вкладку?

Вопрос:

Ответ №1:

Ответ №2:

Вам также может понравиться

Я не могу получить значение формы с помощью isset ($ _POST[‘id’);

у меня есть вопрос: «Подсчитайте общее количество заказов со статусом возвращенного заказа».

Использование указателя для печати каждого элемента в строке с помощью C