Интерактивная форма 2 div и легенды

У меня есть 2 легенды и 2 div, я хочу использовать javascript для щелкните по легенде (signin_user), после чего отобразится ее содержимое, а другое скрыто.

когда другой - clicked (signin_admin) отображается, а другое скрыто

это обычно называется формой входа в стиле табуляции

нет jquery

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('legend', 'div').forEach(legend, div => {
      div.addEventListener('onclick', () => {
        // change color to selected legend
        this.style.color = "#c8cace"
        //show select div content
        //make another legend  white
        //hide another div content

      })
    })
  })
</script>
<style>
  /* by default signin user is highlighted */
  
  .user {
    background-color: #c8cace;
  }
</style>

<body>

  <div id = "user">
    <legend class = "user">signin user</legend>
    <input type = "text" name = "user">
    <input type = "submit" id = "submit-user">
  </div>
  <div id = "admin">
    <legend class = "admin">signin admin</legend>
    <input type = "text" name = "admin">
    <input type = "submit" id = "submit-admin">
  </div>
</body>

</html>

javascript css

28.09.2018 18:53

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Вы можете переключить класс hide, используя атрибуты classListadd/remove:

.hide {
    display: none;
}

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('legend').forEach(function(item) {
    item.addEventListener('click', click_action);
  });
});

function click_action(e) {
  e.stopPropagation();

  //Hide Other divs content
  document.querySelectorAll('input').forEach(function(input) {
    input.classList.add('hide');
  });

  //Show licked one content
  event.target.parentNode.querySelectorAll('input').forEach(function(input) {
    input.classList.remove('hide');
  });
}

.user {
  background-color: #c8cace;
}

.hide {
  display: none;
}

<div id = "user">
  <legend class = "user">signin user</legend>
  <input type = "text" name = "user">
  <input type = "submit" id = "submit-user">
</div>

<div id = "admin">
  <legend class = "admin">signin admin</legend>
  <input type = "text" name = "admin" class = "hide">
  <input type = "submit" id = "submit-admin" class = "hide">
</div>

28.09.2018 19:10

Другие вопросы по теме

Как включить css / js с functions.php в Wordpress?

Зачем использовать @media (min-width: 992px + 1px) вместо @media (min-width: 993px) в Bootstrap

Получить значение атрибута css в конкретном модуле

Как я могу перерисовывать панель инструментов холста каждые 5 минут?

Запрос на непрозрачность - HTML, CSS и Bootstrap

Как выровнять многострочные заголовки с базовым заголовком в CSS

Как закрыть меню, когда я нажимаю опцию? простой JS, но я не могу этого сделать: /

Столбцы сетки разного размера с разметкой сетки

Цвет фона плавающего элемента

Наклеивание ярлыков и элементов управления "перекрещенными", если они принадлежат разным строкам

Интерактивная форма 2 div и легенды

Ответы 1

Другие вопросы по теме

Похожие вопросы