0

Есть вкладки с атрибутами 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. Спасибо!

1
  • Почему у вас три элемента с одинаковыми id? 7 апр 2022 в 14:37

3 ответа 3

1

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

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

Вариант на 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>

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>

0
0

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.