タブ切替の特徴紹介

<div class="d01-04-08-box">
          <div class="d01-04-08-tabs" role="tablist">
            <button class="d01-04-08-tab is-active" data-t="0">スピード</button>
            <button class="d01-04-08-tab" data-t="1">品質</button>
            <button class="d01-04-08-tab" data-t="2">サポート</button>
          </div>
          <div class="d01-04-08-panels">
            <div class="d01-04-08-panel is-show">最短即日で対応。スピーディーな納品でビジネスを止めません。</div>
            <div class="d01-04-08-panel">熟練の専門チームが、細部までこだわり抜いた高品質を実現します。</div>
            <div class="d01-04-08-panel">導入後も専任担当が伴走。困ったときにすぐ相談できる安心感。</div>
          </div>
        </div>

.prev.d01-04-08{background:#f7f8fb}
        .d01-04-08-box{width:100%;max-width:420px;background:#fff;border:1px solid #e6e9f0;border-radius:16px;overflow:hidden}
        .d01-04-08-tabs{display:flex;border-bottom:1px solid #ecedf2}
        .d01-04-08-tab{flex:1;border:0;background:none;padding:14px 6px;font-size:13px;font-weight:700;color:#8a90a2;cursor:pointer;position:relative;transition:color .2s ease}
        .d01-04-08-tab.is-active{color:#5b7cfa}
        .d01-04-08-tab.is-active::after{content:"";position:absolute;left:20%;right:20%;bottom:-1px;height:3px;border-radius:3px;background:#5b7cfa}
        .d01-04-08-panels{padding:22px 20px;min-height:80px}
        .d01-04-08-panel{display:none;font-size:13px;line-height:1.7;color:#3a4058;animation:d01-04-08-fade .35s ease}
        .d01-04-08-panel.is-show{display:block}
        @keyframes d01-04-08-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

(function(){
        var root=document.getElementById('item-01-04-08');if(!root)return;
        var tabs=root.querySelectorAll('.d01-04-08-tab');
        var panels=root.querySelectorAll('.d01-04-08-panel');
        tabs.forEach(function(tab){
          tab.addEventListener('click',function(){
            var i=+tab.getAttribute('data-t');
            tabs.forEach(function(t){t.classList.remove('is-active')});
            panels.forEach(function(p){p.classList.remove('is-show')});
            tab.classList.add('is-active');
            if(panels[i])panels[i].classList.add('is-show');
          });
        });
      })();