https://www.sezax.co.jp/products_service/js/tab-control.js

1function openContent(evt, contentId) {
2    // すべて非アクティブ
3    document.querySelectorAll('.tab').forEach(btn => btn.classList.remove('active'));
4    document.querySelectorAll('.kirikae').forEach(li => li.classList.remove('active'));
5
6    // アクティブにする
7    evt.currentTarget.classList.add('active');
8    document.getElementById(contentId).classList.add('active');
9
10    // タブIDを取得
11    const tabId = evt.currentTarget.id;
12    // URLを書き換え（履歴を追加）
13    history.pushState(null, '', '?tab=' + tabId + '#service_sec02');
14}
15
16// ページ読み込み時や履歴戻し時のタブ復元
17function activateTabFromURL() {
18    // URLクエリからtabパラメータを取得
19    const params = new URLSearchParams(window.location.search);
20    const tabId = params.get('tab') || 'botton3'; // なければbotton3
21
22    // 対応するタブボタンを取得
23    const tabBtn = document.getElementById(tabId);
24    if(tabBtn) {
25        // contentIdは openContent の第2引数
26        let contentId = '';
27        if(tabId === 'botton3') contentId = 'content3';
28        else if(tabId === 'botton2') contentId = 'content2';
29        else if(tabId === 'botton1') contentId = 'content1';
30        // タブを開く
31        openContent({currentTarget: tabBtn}, contentId);
32    }
33}
34
35// 初期表示・戻る/進む時に呼び出し
36window.addEventListener('DOMContentLoaded', activateTabFromURL);
37window.addEventListener('popstate', activateTabFromURL);