Как добавить логику для табов, чтобы активным был только один?

Question

[Егор Кондратьев]

Есть сейчас:
https://codepen.io/lineez/pen/RwaMYMJ

Все что я смог найти самостоятельно это длинные и непонятные мне примеры, поэтому, если не трудно, объяснения приветствуются, равно как и критика с альтернативными примерами.

Answer 1

[Володя Селевертов]

Думаю лучше поздно, чем никогда))
https://codepen.io/Simur/pen/abNYRLG
Там есть комментарии ко всем действиям, надеюсь узнаешь что-то новое для себя)

Comments

[Егор Кондратьев]

Спасибо, это мотивирует!

[Steppp]

Точь в точь как у меня) только переменные переименовал, и коменты изменил)))
Я придерусь к твоему коду чуть чуть)
И почему let buttonTab ? Ведь несколько табов (buttonTabs )!!! И let а не const! ведь табы же не изменятся))) let не нужен)

и функции не стрелочные, ведь новый стандарт) this нет, можно и стрелками)

[Володя Селевертов]

Задушил просто, я старался писать максимально понятно так как понимал что человек только учится)

Answer 2

[Steppp]

Comments

[Егор Кондратьев]

Хотя я действительно понял только первые строчки сейчас, и меня ждет бессонная ночь в обнимку с поисковиком; я очень благодарен вам за это решение!

[Steppp]

Lineez,

// находим все кнопки табы
const tabBtns = document.querySelectorAll(`.tab__btn`);
// находим все окна под табами
const tabContents = document.querySelectorAll(`.tab__content`);


// перебераем табы циклом и каждый эллемент засовываем в переменную el, и порядковый номер в key
tabBtns.forEach((el, key) => {
  // вешаем на каждый таб (уже он в el) обработчик событий - клик (onklick)
  el.addEventListener(`click`, () => {
    // и кликая на какойто эл, перебираем все табы
    tabBtns.forEach(tab => {
      // и у каждого таба удаляем класс active
      tab.classList.remove(`active`);
    });
    // так же перебераем окна под табами,
    tabContents.forEach(content => {
      // и у каждого окна удаляем активный класс
      content.classList.remove(`active`);
    })
    // и после всех удалений активных классов, добавляем активный на кликнутый элемент
    el.classList.add(`active`);
    // и так же добавляем активный класс по [порядковому номеру] 
    tabContents[key].classList.add(`active`);
  })
});

[Егор Кондратьев]

Steppp, куда высылать шоколадки?

[Steppp]

))) Оставь себе)))

Answer 3

[Mario Kun]

let tab1 = document.querySelector('#tab1');
let tab2 = document.querySelector('#tab2');
let tab3 = document.querySelector('#tab3');


let clearAll = function(){
  [].forEach.call(document.getElementsByClassName('tab__btn'),(el) => {
      el.classList.remove('active');
  });
  tab1.classList.remove('active');
  tab2.classList.remove('active');
  tab3.classList.remove('active');
}

let london = document.querySelector('#london').onclick = function () {
  clearAll();
	this.classList.toggle('active');
	tab1.classList.toggle('active');
  
  
}

let tokyo = document.querySelector('#tokyo').onclick = function () {
  clearAll();
	this.classList.toggle('active');
	tab2.classList.toggle('active');
}

let paris = document.querySelector('#paris').onclick = function () {
  clearAll();
	this.classList.toggle('active');
	tab3.classList.toggle('active');
}

Comments

[Егор Кондратьев]

Круто, это действительно работает, спасибо!