<div class="tab-menu">
  <!-- タブメニュー① -->
  <div class="tab-menu__container js-tab">
    <!-- メニュー -->
    <ul class="tab-menu__head">
      <!-- クラス付与 -->
      <li class="js-tab-button is-active">東京本社</li>
      <li class="js-tab-button">名古屋支店</li>
      <li class="js-tab-button">大阪支店</li>
    </ul>
    <!-- コンテンツ -->
    <ul class="tab-menu__main">
      <!-- クラス付与 -->
      <li class="js-tab-content is-active">
        東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。
      </li>
      <li class="js-tab-content">
        名古屋支店の情報が入ります。名古屋支店の情報が入ります。名古屋支店の情報が入ります。名古屋支店の情報が入ります。名古屋支店の情報が入ります。名古屋支店の情報が入ります。名古屋支店の情報が入ります。</li>
      <li class="js-tab-content">
        大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。
      </li>
    </ul>
  </div>
  
  <!-- タブメニュー② -->
  <div class="tab-menu__container js-tab">
    <!-- メニュー -->
    <ul class="tab-menu__head">
      <!-- クラス付与 -->
      <li class="js-tab-button is-active">東京本社</li>
      <li class="js-tab-button">名古屋支店</li>
      <li class="js-tab-button">大阪支店</li>
    </ul>
    <!-- コンテンツ -->
    <ul class="tab-menu__main">
      <!-- クラス付与 -->
      <li class="js-tab-content is-active">
        東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。
      </li>
      <li class="js-tab-content">
        名古屋支店の情報が入ります。名古屋支店の情報が入ります。名古屋支店の情報が入ります。名古屋支店の情報が入ります。名古屋支店の情報が入ります。名古屋支店の情報が入ります。名古屋支店の情報が入ります。</li>
      <li class="js-tab-content">
        大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。
      </li>
    </ul>
  </div>
</div>

.tab-menu {
  padding: 60px 20px;
  &__container {
    max-width: 1000px;
    margin: 0 auto 60px;
    border: 1px solid #000;
    &:last-child {
      margin: auto;
    }
  }
  &__head {
    display: flex;
    border-bottom: 1px solid #000;
    li {
      flex: 1;
      font-weight: bold;
      padding: 20px;
      border-right: 1px solid #000;
      cursor: pointer;
      &:last-child {
        border-right: none;
      }
      /* クラス付与時の指定 */
      &.is-active {
        color: #fff;
        background: #000;
      }
    }
  }
  &__main {
    padding: 20px;
    li {
      display: none;
      line-height: 1.6;
      /* クラス付与時の指定 */
      &.is-active {
        display: block;
      }
    }
  }
}

//要素を取得
const tabs = document.querySelectorAll('.js-tab');

//繰り返し処理
tabs.forEach((tab) => {
  //要素を取得
  const buttons = tab.querySelectorAll('.js-tab-button'),
    contents = tab.querySelectorAll('.js-tab-content');

  function toggle() {
    //ボタンのクラス削除
    buttons.forEach((button) => {
      button.classList.remove('is-active');
    });

    //コンテンツのクラス削除
    contents.forEach((content) => {
      content.classList.remove('is-active');
    });

    //ボタンにクラス付与
    this.classList.add('is-active');

    //クリックした要素の順番を取得
    const arrayButton = Array.prototype.slice.call(buttons),
      index = arrayButton.indexOf(this);

    //該当するコンテンツを表示
    contents[index].classList.add("is-active");
  }

  //繰り返し処理
  buttons.forEach((button) => {
    //クリックイベント
    button.addEventListener('click', toggle);
  });
});