← 動的パーツギャラリーへ戻る

パーツ番号 03-04-11 ・ JavaScript使用

地域別営業時間切り替えタブ

タブをクリックすると拠点ごとの営業時間・電話番号が切り替わります。海外拠点を持つWordPressサイトで地域別の問い合わせ先を1箇所にまとめて案内できます。

i18nclickjs

プレビュー

ソースコード

HTML

<div class="d03-04-11-wrap">
          <div class="d03-04-11-tabs">
            <button type="button" class="d03-04-11-tab is-active" data-region="jp">日本</button>
            <button type="button" class="d03-04-11-tab" data-region="us">US</button>
            <button type="button" class="d03-04-11-tab" data-region="eu">EU</button>
          </div>
          <div class="d03-04-11-panel">
            <p class="d03-04-11-hours">平日 9:00-18:00(JST)</p>
            <p class="d03-04-11-tel">TEL: 03-1234-5678</p>
          </div>
        </div>

CSS

.d03-04-11-wrap{width:min(280px,100%)}
        .d03-04-11-tabs{display:flex;gap:6px;margin-bottom:14px}
        .d03-04-11-tab{flex:1;padding:8px 0;border:1px solid #d1d5db;border-radius:8px;background:#fff;
          color:#374151;font-size:12px;font-weight:700;cursor:pointer;transition:background .2s,color .2s}
        .d03-04-11-tab.is-active{background:#4338ca;color:#fff;border-color:#4338ca}
        .d03-04-11-panel{padding:14px;background:#f3f4f6;border-radius:10px;text-align:center}
        .d03-04-11-hours{margin:0 0 6px;font-size:13px;font-weight:700;color:#111827}
        .d03-04-11-tel{margin:0;font-size:12px;color:#6b7280}

JavaScript

(function(){
        var root=document.querySelector('.d03-04-11-wrap');
        if(!root)return;
        var data={
          jp:{hours:'平日 9:00-18:00(JST)',tel:'TEL: 03-1234-5678'},
          us:{hours:'Mon-Fri 9:00-18:00(EST)',tel:'TEL: +1 212-555-0134'},
          eu:{hours:'Mon-Fri 9:00-17:00(CET)',tel:'TEL: +49 30-1234-5678'}
        };
        var hoursEl=root.querySelector('.d03-04-11-hours');
        var telEl=root.querySelector('.d03-04-11-tel');
        root.querySelectorAll('.d03-04-11-tab').forEach(function(tab){
          tab.addEventListener('click',function(){
            root.querySelectorAll('.d03-04-11-tab').forEach(function(t){t.classList.remove('is-active');});
            tab.classList.add('is-active');
            var d=data[tab.getAttribute('data-region')];
            hoursEl.textContent=d.hours;
            telEl.textContent=d.tel;
          });
        });
      })();

クラス名 .d03-04-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。