<section class="tab">

      <button id="london" data-target="1" class="tab__btn">London</button>
      <button id="tokyo" data-target="2"  class="tab__btn">Tokyo</button>
      <button id="paris" data-target="3"  class="tab__btn">Paris</button>

      <div class="tab__body">
        <div id="tab1" class="tab__content">
          <div class="tab__h2">London</div>
          <p class="tab__desc">London is a capital of Britan</p>
        </div>

        <div id="tab2" class="tab__content">
          <div class="tab__h2">Tokyo</div>
          <p class="tab__desc">Tokyo is a capital of Japan</p>
        </div>

        <div id="tab3" class="tab__content">
          <div class="tab__h2">Paris</div>
          <p class="tab__desc">Paris is a capital of French</p>
        </div>

      </div>
    </section>

.tab {
  padding: 50px;
  text-align: center;
  &__body {
    padding-top: 20px;
  }

  &__btn {
  border: none;
  background-color: rgb(175, 162, 162);
  padding: 20px;
  font-size: 20px;
  border-radius: 25px;
  outline: none;
  transition: all 0.3s ease 0s;
  &:hover {
    color: #fff;
  }
  &.active {
    background-color: rgb(179, 119, 119);
  }
  }

  &__content {
    display: none;
    padding: 10px;
    border-top: none;
    background-color: rgb(56, 177, 137);
    &.active {
      display: block;
    }
  }

  &__h2 {
    font-size: 25px;
    font-weight: bold;
    color: #fff;
  }

  &__desc {
    font-size: 18px;
    color: #fff;
    letter-spacing: 2px;
  }
}

// находим все кнопки табы
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`);
  })
});