タブ

ページやブロック要素を切り替えるUIを提供します。

<div class="tab">
  <button class="item active">ホーム</button>
  <button class="item">通知</button>
  <button class="item">見つける</button>
  <button class="item">メッセージ</button>
</div>

スクリプト例

const items = document.querySelectorAll('.tab>.item');
let activeIndex = 0;
items.forEach((it, i) => {
  if (it.classList.contains('active')) activeIndex = i;
  it.addEventListener('click', () => {
    if (i === activeIndex) return;
    items[activeIndex].classList.remove('active');
    items[i].classList.add('active');
    activeIndex = i;
  });
});