В макете есть поп-ап с переключением вкладок регистрация/вход. Какой есть наиболее верный способ реализовать этот поп-ап? С помощью ссылок во вкладках на разные окна, или есть какой-то более верный способ?
1 ответ
Если дело только в переключениях табов, то почему бы не написать функции которые рендерят контент, в зависимости от таба?
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>