<section class="l-section">
  <div class="l-section__inner">

    <ul class="js-tab-list tab-list" role="tab-list">
      <li class="tab-list__item">
        <button class="js-tab-button tab-button" type="button" role="tab" aria-controls="tab-panel-1" aria-selected="true">
          タブ1
        </button>
      </li>
      <li class="tab-list__item">
        <button class="js-tab-button tab-button" type="button" role="tab" aria-controls="tab-panel-2" aria-selected="false">
          タブ2
        </button>
      </li>
      <li class="tab-list__item">
        <button class="js-tab-button tab-button" type="button" role="tab" aria-controls="tab-panel-3" aria-selected="false">
          タブ3
        </button>
      </li>
    </ul><!-- tab-list -->

    <div class="js-tab-panel-wrapper tab-content">
      <div id="tab-panel-1" class="js-tab-panel tab-panel" role="tab-panel" aria-hidden="false">
        <p>タブ1の内容が入ります。</p>
      </div>
      <div id="tab-panel-2" class="js-tab-panel tab-panel" role="tab-panel" aria-hidden="true">
        <p>タブ2の内容が表示されます。</p>
      </div>
      <div id="tab-panel-3" class="js-tab-panel tab-panel" role="tab-panel" aria-hidden="true">
        <p>タブ3の内容です。</p>
      </div>
    </div>

  </div>
</section>

<section class="l-section">
  <div class="l-section__inner">

    <ul class="js-tab-list tab-list" role="tab-list">
      <li class="tab-list__item">
        <button class="js-tab-button tab-button" type="button" role="tab" aria-controls="tab-panel-b-1" aria-selected="true">
          タブ1
        </button>
      </li>
      <li class="tab-list__item">
        <button class="js-tab-button tab-button" type="button" role="tab" aria-controls="tab-panel-b-2" aria-selected="false">
          タブ2
        </button>
      </li>
      <li class="tab-list__item">
        <button class="js-tab-button tab-button" type="button" role="tab" aria-controls="tab-panel-b-3" aria-selected="false">
          タブ3
        </button>
      </li>
    </ul><!-- tab-list -->

    <div class="js-tab-panel-wrapper tab-content">
      <div id="tab-panel-b-1" class="js-tab-panel tab-panel" role="tab-panel" aria-hidden="false">
        <p>タブB1の内容が入ります。</p>
      </div>
      <div id="tab-panel-b-2" class="js-tab-panel tab-panel" role="tab-panel" aria-hidden="true">
        <p>タブB2の内容が表示されます。</p>
      </div>
      <div id="tab-panel-b-3" class="js-tab-panel tab-panel" role="tab-panel" aria-hidden="true">
        <p>タブB3の内容です。</p>
      </div>
    </div>

  </div>
</section>
input, button, textarea, select {
	margin: 0;
	padding: 0;
	vertical-align: middle;
	font-size: inherit;
	color: inherit;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	-ms-appearance: none;
	appearance: none;
}


.l-section {
	padding: 0 40px;
	+ .l-section {
		margin-top: 100px;
	}
} //-section

.l-section__inner {
	max-width: 1000px;
	width: 100%;
  margin: 0 auto;
}


//タブ ボタン
.tab-list {
  display: flex;
}

.tab-list__item {
  flex: 1;
  &:not(:first-child) {
    margin-left: 5px;
  }
}

.tab-button {
  width: 100%;
  height: 100%;
  padding: 10px;
  background: #eee;
  cursor: pointer;
  &[aria-selected="true"] {
    background: #3ac8ff;
  }
}
//===============タブ ボタン


//タブ パネル
.tab-content {
  margin-top: 20px;
}

.tab-panel {
  padding: 20px 15px;
  border: 1px solid #eee;
  &[aria-hidden="true"] {
    display: none;
  }
}
//===============タブ パネル
View Compiled
class Tab {
  constructor() {
    this.tab_button = document.querySelectorAll('.js-tab-button');
  }

  init() {
    this.attachEvent();
  }

  attachEvent() {
    for(const button of this.tab_button) {
      button.addEventListener('click', (e) => {
        let id = button.getAttribute('aria-controls');
        this.hideContents(id, e);
        this.showContent(id, e);
      });
    }
  }

  hideContents(id, e) {
    //クリックしたタブ、パネルの親を取得
    let button_parent = e.target.closest('.js-tab-list');
    let panel_parent = document.querySelector(`#${id}`).closest('.js-tab-panel-wrapper');

    //表示状態のボタン、パネルの状態を取得
    let active_button = button_parent.querySelector('.js-tab-button[aria-selected="true"]');
    let active_panel = panel_parent.querySelector('.js-tab-panel[aria-hidden="false"]');

    //タブボタン
    active_button.setAttribute('aria-selected', 'false');
    //タブパネル
    active_panel.setAttribute('aria-hidden', 'true');
  }

  showContent(id, e) {
    //タブボタン
    e.target.closest('.js-tab-button').setAttribute('aria-selected', 'true');
    //タブパネル
    document.querySelector(`#${id}`).setAttribute('aria-hidden', 'false');
  }

}

const tab = new Tab();
tab.init();
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.