@Lineez
Собираю коллекцию шпаргалок с интернетов

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

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

Все что я смог найти самостоятельно это длинные и непонятные мне примеры, поэтому, если не трудно, объяснения приветствуются, равно как и критика с альтернативными примерами.
  • Вопрос задан
  • 121 просмотр
Решения вопроса 3
billyOne
@billyOne
Энтузиаст из села
Думаю лучше поздно, чем никогда))
https://codepen.io/Simur/pen/abNYRLG
Там есть комментарии ко всем действиям, надеюсь узнаешь что-то новое для себя)
Ответ написан
@Steppp
Ответ написан
@marioKun
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');
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы