Зачем так усложнять?
Вешаете клик на элемент tabs
, через делегирование событий проверяете, было ли нажатие на элемент .q
, если да - то:
Для смены на "активный" у .tabs
- Ищите элемент
.q.active
и удаляете класс .active
- Добавляете класс
.active
нажатому элементу
Для смены на "активный" у .content
. (для удобства советую обернуть все .w
в блок, будет у нас .content
)
- Получаете индекс нажатого элемента
.q
- Находите
.w.active
и удаляете класс .active
- Находите элемент по индексу нажатого и добавляете класс
.active
let tabs = document.querySelector('.tabs'),
content = document.querySelector('.content');
tabs.addEventListener('click', function(e) { // Вешаем обработчик
if(e.target.classList.contains('q')) { // Проверяем нажатие на элемент `.w`
// СМЕНА ССЫЛОК
let target = e.target; // Это нажатый элемент
if(target.classList.contains('active')) return false; // Если элемент уже активный, то не выполняем действия ниже
this.querySelector('.q.active').classList.remove('active'); // находим в `.tabs` активный элемент и "деактивируем"
target.classList.add('active'); // А нажатый активируем
// СМЕНА КОНТЕНТА
let index = Array.prototype.slice.call(this.children).indexOf(target); // Получаем индекс нажатого элемента
content.querySelector('.w.active').classList.remove('active'); // Деактивируем
content.querySelectorAll('.w')[index].classList.add('active'); // активируем
}
});
.q {
cursor: pointer;
padding-left: 10px;
}
.q.active {
color: green;
}
.w {
display: none;
padding-left: 10px;
}
.w.active {
display: block;
}
.tabs {
display: flex;
}
<div class="dis">
<div class="tabs">
<div class="q active">payment</div>
<div class="q">order</div>
<div class="q">any one</div>
</div>
<div class="content">
<div class="w active">
<p>loerm ipsum1111</p>
</div>
<div class="w">
<p>loerm ipsum222</p>
</div>
<div class="w">
<p>loerm ipsum333</p>
</div>
</div>
</div>
А лучше всего вручную добавить какой-то одинаковый идентификатор элементам .q
и .w
, чтобы было проще их найти и не перепутать.
let tabs = document.querySelector('.tabs'),
content = document.querySelector('.content');
tabs.addEventListener('click', function(e) {
if(e.target.classList.contains('q')) {
let target = e.target,
id = target.getAttribute('data-id');
if(target.classList.contains('active')) return false;
this.querySelector('.q.active').classList.remove('active');
target.classList.add('active');
content.querySelector('.w.active').classList.remove('active');
content.querySelector('.w[data-id="'+id+'"]').classList.add('active');
}
});
.q {
cursor: pointer;
padding-left: 10px;
}
.q.active {
color: green;
}
.w {
display: none;
padding-left: 10px;
}
.w.active {
display: block;
}
.tabs {
display: flex;
}
<div class="dis">
<div class="tabs">
<div class="q active" data-id="item-1">payment</div>
<div class="q" data-id="item-2">order</div>
<div class="q" data-id="item-3">any one</div>
</div>
<div class="content">
<div class="w active" data-id="item-1">
<p>loerm ipsum1111</p>
</div>
<div class="w" data-id="item-2">
<p>loerm ipsum222</p>
</div>
<div class="w" data-id="item-3">
<p>loerm ipsum333</p>
</div>
</div>
</div>