0

В макете есть поп-ап с переключением вкладок регистрация/вход. Какой есть наиболее верный способ реализовать этот поп-ап? С помощью ссылок во вкладках на разные окна, или есть какой-то более верный способ?

1
  • Модалка это просто div который размещен поверх остальных и по центру. Вам абсолютно ничего не мешает сделать в нем сколько угодно вкладок.
    – Talleyran
    17 июл 2022 в 8:11

1 ответ 1

0

Если дело только в переключениях табов, то почему бы не написать функции которые рендерят контент, в зависимости от таба?

document.querySelector('.tabs').addEventListener('click', (e) => {
  const tab = e.target.closest('[data-tab]')?.dataset?.tab
  tab && renderContent(tab)
})


// в зависимости от аргумента рендерим контент
function renderContent(tab) {
  if (tab === 'login') {
    renderLoginContent()
  } else if (tab === 'registration') {
    renderRegistrationContent()
  }
}

// рендер логина
function renderLoginContent() {
  document.querySelector('.container').textContent = 'login content'
}

// рендер регистрации
function renderRegistrationContent() {
  document.querySelector('.container').textContent = 'registration content'
}
.tab {
  display: inline-block;
  padding: 5px 15px;
  border: 1px solid black;
}

.container {
  width: 500px;
  height: 500px;
  background: coral;
  margin-top: 10px;
}
<div class="tabs">
  <div class="tab" data-tab="login">Login</div>
  <div class="tab" data-tab="registration">Registration</div>
</div>

<div class="container"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.