セグメント切替(タブ)

<div class="d11-03-06-phone">
          <div class="d11-03-06-screen">
            <div class="d11-03-06-seg" id="d11-03-06-seg">
              <span class="d11-03-06-slider" id="d11-03-06-slider"></span>
              <button class="d11-03-06-sbtn is-on" data-i="0">最新</button>
              <button class="d11-03-06-sbtn" data-i="1">人気</button>
              <button class="d11-03-06-sbtn" data-i="2">保存</button>
            </div>
            <div class="d11-03-06-panels" id="d11-03-06-panels">
              <div class="d11-03-06-panel is-show">最新の内容</div>
              <div class="d11-03-06-panel">人気の内容</div>
              <div class="d11-03-06-panel">保存済みの内容</div>
            </div>
          </div>
        </div>

.d11-03-06-phone{width:190px;height:240px;border-radius:24px;border:6px solid #1f2937;background:#fff;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.15)}
        .d11-03-06-screen{position:absolute;inset:0;background:#f8fafc;padding:14px 12px}
        .d11-03-06-seg{position:relative;display:flex;background:#e2e8f0;border-radius:20px;padding:3px}
        .d11-03-06-slider{position:absolute;top:3px;left:3px;width:calc((100% - 6px)/3);height:calc(100% - 6px);background:#fff;border-radius:18px;box-shadow:0 2px 6px rgba(0,0,0,.12);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
        .d11-03-06-sbtn{position:relative;z-index:1;flex:1;border:0;background:none;padding:7px 0;font-size:11px;font-weight:600;color:#64748b;cursor:pointer;transition:color .2s}
        .d11-03-06-sbtn.is-on{color:#4f46e5}
        .d11-03-06-panels{position:relative;margin-top:14px;height:150px}
        .d11-03-06-panel{position:absolute;inset:0;background:#fff;border:1px solid #e5e7eb;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#334155;opacity:0;transition:opacity .3s;pointer-events:none}
        .d11-03-06-panel.is-show{opacity:1;pointer-events:auto}

(function(){
        var root=document.getElementById('item-11-03-06');if(!root)return;
        var btns=root.querySelectorAll('.d11-03-06-sbtn'),slider=root.querySelector('#d11-03-06-slider'),panels=root.querySelectorAll('.d11-03-06-panel');
        btns.forEach(function(b){b.addEventListener('click',function(){
          var i=+b.dataset.i;
          btns.forEach(function(x){x.classList.remove('is-on');});b.classList.add('is-on');
          slider.style.transform='translateX('+(i*100)+'%)';
          panels.forEach(function(p,pi){p.classList.toggle('is-show',pi===i);});
        });});
      })();