マグネットのように背景色が移動するタブボタンの作り方

1
<div class="c-tab" data-tab="wrapper">
2
  <ul class="c-tab__list" role="tablist" data-tab="list">
3
    <li class="c-tab__list-item" data-tab="item" role="presentation">
4
      <button role="tab" id="tab01" class="c-tab__button" aria-expanded="true" aria-selected="true"
5
        aria-controls="tabpanel01" data-tab="button">タブ1</button>
6
    </li>
7
    <!-- 以下繰り返し -->
8
  </ul>
9
  <span class="c-tab__bg" data-tab="bg"></span>
10
  <div class="c-tab__body">
11
    <div id="tabpanel01" class="c-tab__body-item" role="tabpanel" aria-labelledby="tab01" aria-hidden="false"
12
      tabindex="0">
13
      <p>タブ1のコンテンツ</p>
14
    </div>
15
    <!-- 以下繰り返し -->
16
  </div>
17
</div>

1
/* 背景の親要素 */
2
.c-tab {
3
  position: relative;
4
}
5

6
/* 省略：タブボタン、タブコンテンツなどのスタイル */
7

8
/* 背景要素 */
9
.c-tab__bg {
10
  display: block;
11
  position: absolute;
12
  top: 0;
13
  left: 0;
14
  background-color: #f0f0f0;
15
  z-index: -1;
16
  pointer-events: none;
17
  transition-property: transform, width, height;
18
  transition-duration: 0.3s;
19
  transition-timing-function: ease;
20
}

1
const tabWrapper = document.querySelector('[data-tab="wrapper"]');
2
const tabBg = tabWrapper.querySelector('[data-tab="bg"]');
3
const tabList = tabWrapper.querySelector('[data-tab="list"]');
4

5
// 背景色を動かす処理
6
function updateTabBackground() {
7
  const activeButton = tabWrapper.querySelector('[aria-selected="true"]');
8

9
  if (activeButton) {
10
    const buttonRect = activeButton.getBoundingClientRect();
11
    const listRect = tabList.getBoundingClientRect();
12

13
    // 背景の位置とサイズを取得
14
    const x = buttonRect.left - listRect.left;
15
    const y = buttonRect.top - listRect.top;
16
    const buttonWidth = buttonRect.width;
17
    const buttonHeight = buttonRect.height;
18

19
    // 背景の位置とサイズを反映
20
    tabBg.style.transform = `translate(${x}px, ${y}px)`;
21
    tabBg.style.width = `${buttonWidth}px`;
22
    tabBg.style.height = `${buttonHeight}px`;
23
  }
24
}

1
const buttonRect = activeButton.getBoundingClientRect();
2
const listRect = tabList.getBoundingClientRect();
3

4
// 背景の位置とサイズを取得
5
const x = buttonRect.left - listRect.left;
6
const y = buttonRect.top - listRect.top;
7
const buttonWidth = buttonRect.width;
8
const buttonHeight = buttonRect.height;

1
// 背景の位置とサイズを反映
2
tabBg.style.transform = `translate(${x}px, ${y}px)`;
3
tabBg.style.width = `${buttonWidth}px`;
4
tabBg.style.height = `${buttonHeight}px`;

1
function tabControl(event) {
2
  // 省略...
3
  // タブボタンクリック時
4
  updateTabBackground();
5
}
6

7
// 初期表示時
8
updateTabBackground();
9

10
// ウィンドウリサイズ時
11
window.addEventListener("resize", updateTabBackground);