ムード別プレイリスト切替タブ

<div class="d07-06-11-wrap">
          <div class="d07-06-11-tabs">
            <button type="button" class="d07-06-11-tab is-active" data-mood="chill">Chill</button>
            <button type="button" class="d07-06-11-tab" data-mood="focus">Focus</button>
            <button type="button" class="d07-06-11-tab" data-mood="party">Party</button>
          </div>
          <ul class="d07-06-11-list">
            <li>波音のあとで</li>
            <li>夕凪ラウンジ</li>
            <li>静かな窓辺</li>
          </ul>
        </div>

.d07-06-11 .d07-06-11-wrap{ width:100%; max-width:230px; }
        .d07-06-11 .d07-06-11-tabs{ display:flex; gap:4px; background:#f0f0f3; padding:4px; border-radius:999px; margin-bottom:14px; }
        .d07-06-11 .d07-06-11-tab{ flex:1; border:none; background:transparent; padding:7px 4px; font-size:11px; border-radius:999px; cursor:pointer; color:#666; }
        .d07-06-11 .d07-06-11-tab.is-active{ background:#111; color:#fff; font-weight:700; }
        .d07-06-11 .d07-06-11-list{ list-style:none; margin:0; padding:0; font-size:12.5px; color:#374151; transition:opacity .25s ease; }
        .d07-06-11 .d07-06-11-list.is-fading{ opacity:0; }
        .d07-06-11 .d07-06-11-list li{ padding:8px 10px; background:#f7f7fa; border-radius:8px; margin-bottom:6px; }

(function(){
        var root = document.querySelector('.d07-06-11');
        var tabs = root.querySelectorAll('.d07-06-11-tab');
        var list = root.querySelector('.d07-06-11-list');
        var data = {
          chill: ['波音のあとで','夕凪ラウンジ','静かな窓辺'],
          focus: ['深呼吸のリズム','集中モード','雨音とページ'],
          party: ['光と鼓動','夜が始まる合図','踊るビート']
        };
        tabs.forEach(function(tab){
          tab.addEventListener('click', function(){
            tabs.forEach(function(t){ t.classList.remove('is-active'); });
            tab.classList.add('is-active');
            list.classList.add('is-fading');
            setTimeout(function(){
              var mood = tab.getAttribute('data-mood');
              list.innerHTML = '';
              data[mood].forEach(function(t){
                var li = document.createElement('li');
                li.textContent = t;
                list.appendChild(li);
              });
              list.classList.remove('is-fading');
            }, 220);
          });
        });
      })();