<div class="tab">
  <ul class="tab-list" role="tablist">
    <li class="tab-item" role="presentation">
      <button
          type="button"
          class="tab-button js-button-1 is-active"
          aria-controls="panel1"
          aria-selected="true"
          role="tab"
          id="tab1"
      >
        タブ1
      </button>
    </li>
    <li class="tab-item" role="presentation">
      <button
          type="button"
          class="tab-button js-button-2"
          aria-controls="panel2"
          aria-selected="false"
          role="tab"
          id="tab2"
      >
        タブ2
      </button>
    </li>
    <li class="tab-item" role="presentation">
      <button
          type="button"
          class="tab-button js-button-3"
          aria-controls="panel3"
          aria-selected="false"
          role="tab"
          id="tab3"
      >
        タブ3
      </button>
    </li>
  </ul>
  <div class="tab-panel js-pannel" id="panel1" role="tabpanel" aria-labelledby="tab1">
    <p>パネル1</p>
    <p><a href="#">リンク1</a></p>
  </div>
  <div class="tab-panel js-pannel" id="panel2" role="tabpanel" aria-labelledby="tab2" hidden>
    <p>パネル2</p>
    <p><a href="#">リンク2</a></p>
  </div>
  <div class="tab-panel js-pannel" id="panel3" role="tabpanel" aria-labelledby="tab3" hidden>
    <p>パネル3</p>
    <p><a href="#">リンク3</a></p>
  </div>
</div>
  /* initial */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #eee;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
}

ul,
ol {
  list-style: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
}

/* component */

.tab {
  width: min(500px, 100%);
}

.tab-list {
  display: flex;
}

.tab-item + .tab-item {
  margin-left: 2px;
}

.tab-button {
  padding: 8px 16px;
  background: #fff;
  border-radius: 4px 4px 0 0;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}

.tab-button.is-active {
  color: #fff;
  background: #87ceeb;
}

.tab-panel {
  min-height: 100px;
  padding: 24px;
  background: #fff;
}
// 今回使用するtab部分の要素を取得
const elemTabButton1 = document.querySelector('.js-button-1')
const elemTabButton2 = document.querySelector('.js-button-2')
const elemTabButton3 = document.querySelector('.js-button-3')

// aria-controlsに記載されている内容を元に変更するid名を取得
const getIdName = (buttonElem) => {
  const idName = buttonElem.getAttribute('aria-controls')
  return idName
}

// クリックした時のイベント処理
const clickEvent = (elem) => {
  // クリック前にアクティブな要素を見つけて、activeを削除する
  const elemActiveButton = document.querySelector('button.is-active')
  if(elemActiveButton) {
    const activeIdName = getIdName(elemActiveButton)
    const elemActivePanel = document.getElementById(activeIdName)
    elemActiveButton.classList.remove('is-active')
    elemActiveButton.setAttribute('aria-selected', 'false')
    elemActivePanel.hidden = true
  }
  // クリックした要素に対して、activeにする
  const clickIdName = getIdName(elem)
  const elemclickPanel = document.getElementById(clickIdName)
  elem.classList.add('is-active')
  elem.setAttribute('aria-selected', 'true')
  elemclickPanel.hidden = false
}

// 各要素をクリックした時に関数を実行
elemTabButton1.addEventListener('click', () => {
  clickEvent(elemTabButton1)
}, false)

elemTabButton2.addEventListener('click', () => {
  clickEvent(elemTabButton2)
}, false)

elemTabButton3.addEventListener('click', () => {
  clickEvent(elemTabButton3)
}, false)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.