Как проверить имеет ли data-tab класс active?

Question

Есть вкладки с атрибутами data-tab:

<div class="tabs__controlls">
            <button class="tab active" id="tab"  data-tab="1">Москва</button>
            <button class="tab active" id="tab"  data-tab="2">Иркутск</button>
            <button class="tab active" id="tab"  data-tab="3">Санкт-Петербург</button>
</div>

Хочу при клике на кнопку выводить карту Яндекса.

Вопрос: как сделать проверку, если data-tab="1" имеет класс active, выводить определенную карту. На JS. Спасибо!

Answer 1

Можно так:

const hasClassActive = (tabNumber) => {
  const dataTab = document.querySelector(`.tab[data-tab='${tabNumber}']`);
  
  return dataTab.classList.contains('active');
}

console.log(hasClassActive(1));
console.log(hasClassActive(2));
console.log(hasClassActive(3));

<div class="tabs__controlls">
  <button class="tab active" id="tab" data-tab="1">Москва</button>
  <button class="tab" id="tab" data-tab="2">Иркутск</button>
  <button class="tab active" id="tab" data-tab="3">Санкт-Петербург</button>
</div>

Answer 2

function checkButton (dataTabAttribute, classToCheck) {
  const element = document.querySelector(`button[data-tab="${dataTabAttribute}"]`);
  return element.classList.contains(classToCheck);
}

console.log( checkButton('1', 'active') ); // true
console.log( checkButton('2', 'active') ); // false

<div class="tabs__controlls">
            <button class="tab active" id="tab"  data-tab="1">Москва</button>
            <button class="tab" id="tab"  data-tab="2">Иркутск</button>
            <button class="tab active" id="tab"  data-tab="3">Санкт-Петербург</button>
</div>

Answer 3

В заголовке вопроса одно, в описание другое, в метках третье.. Но не об этом.

Я вопрос понял так: Вам нужно реализовать табы, при переключение которых вы будете менять содержимое блока, в вашем случае выводить другой город на Яндекс.Карте.

Вариант на JS

let tabsControlls = document.querySelector('.tabs__controlls'),
    map = document.querySelector('#map');

tabsControlls.addEventListener('click', function(e) {
  let target = e.target.closest('.tab');
  if(target && !target.classList.contains('active')) {
    let id = target.getAttribute('data-tab');
    tabsControlls.querySelector('.tab.active').classList.remove('active')
    target.classList.add('active');
    
    if(id == 1) {
      map.innerText = 'Представьте, что тут Яндекс.карта Москвы';
    }
    if(id == 2) {
      map.innerText = 'Представьте, что тут Яндекс.карта Иркутска';
    }
    if(id == 3) {
      map.innerText = 'Представьте, что тут Яндекс.карта Санкт-Петербурга';
    }
  }
});

.tabs__controlls button.active {
  border-radius: 3px;
  border-color: green;
}

#map {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 150px;
  text-align: center;
  background: lightblue;
}

<div class="tabs__controlls">
  <button class="tab active" data-tab="1">Москва</button>
  <button class="tab" data-tab="2">Иркутск</button>
  <button class="tab" data-tab="3">Санкт-Петербург</button>
</div>

<div id="map">
  Представьте, что тут Яндекс.карта Москвы
</div>

Ну и т.к. в метках указан jQuery, вот вариант на нём:

let tabsControlls = $('.tabs__controlls'),
    map = $('#map');

tabsControlls.on('click', '.tab', function() {
  let target = $(this);
  if(!target.hasClass('active')) {
    let id = target.attr('data-tab');
    tabsControlls.find('.tab.active').removeClass('active')
    target.addClass('active');
    
    if(id == 1) {
      map.text('Представьте, что тут Яндекс.карта Москвы');
    }
    if(id == 2) {
      map.text('Представьте, что тут Яндекс.карта Иркутска');
    }
    if(id == 3) {
      map.text('Представьте, что тут Яндекс.карта Санкт-Петербурга');
    }
  }
});

.tabs__controlls button.active {
  border-radius: 3px;
  border-color: green;
}

#map {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 150px;
  text-align: center;
  background: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tabs__controlls">
  <button class="tab active" data-tab="1">Москва</button>
  <button class="tab" data-tab="2">Иркутск</button>
  <button class="tab" data-tab="3">Санкт-Петербург</button>
</div>

<div id="map">
  Представьте, что тут Яндекс.карта Москвы
</div>

БЛОГ НА HUSL

Как проверить имеет ли data-tab класс active?

Ответы (3 шт):