交通手段タブ切替

<div class="d10-04-11-box">
          <div class="d10-04-11-tabs">
            <button class="d10-04-11-tab is-active" data-m="train" type="button">🚃 電車</button>
            <button class="d10-04-11-tab" data-m="car" type="button">🚗 車</button>
            <button class="d10-04-11-tab" data-m="walk" type="button">🚶 徒歩</button>
          </div>
          <div class="d10-04-11-info">
            <p class="d10-04-11-time" data-m="train">さくら中央駅から<b>4分</b></p>
            <p class="d10-04-11-time" data-m="car">駐車場完備・<b>2分</b></p>
            <p class="d10-04-11-time" data-m="walk">駅前より<b>320m・5分</b></p>
          </div>
        </div>

.d10-04-11-box{width:230px}
        .d10-04-11-tabs{display:flex;gap:6px;margin-bottom:12px}
        .d10-04-11-tab{flex:1;border:1.5px solid #e0e8ee;background:#fff;color:#556;font-size:11px;font-weight:600;padding:8px 2px;border-radius:8px;cursor:pointer;transition:all .15s}
        .d10-04-11-tab.is-active{border-color:#2f7fef;background:#eaf2ff;color:#2f7fef}
        .d10-04-11-info{position:relative;height:40px;background:#f2f6f9;border-radius:10px;display:flex;align-items:center;justify-content:center}
        .d10-04-11-time{position:absolute;margin:0;font-size:12.5px;color:#334;opacity:0;transition:opacity .2s;text-align:center}
        .d10-04-11-time.is-show{opacity:1}
        .d10-04-11-time b{color:#2f7fef}

(function(){
        var root=document.getElementById('item-10-04-11');if(!root)return;
        var tabs=root.querySelectorAll('.d10-04-11-tab'),times=root.querySelectorAll('.d10-04-11-time');
        function show(m){times.forEach(function(t){t.classList.toggle('is-show',t.dataset.m===m);});}
        tabs.forEach(function(b){
          b.addEventListener('click',function(){
            tabs.forEach(function(x){x.classList.remove('is-active');});
            b.classList.add('is-active');show(b.dataset.m);
          });
        });
        show('train');
      })();