tab切り替え

title.html

<div class="search-area">

  <!-- ① 全共通 -->
  <div class="search-common">
    <input type="text" placeholder="キーワード検索">
  </div>

  <!-- ② タブ2・3共通 -->
  <div class="search-shared option" data-tab="2-3">
    <select>
      <option>共通条件</option>
    </select>
  </div>

  <!-- ③ 個別 -->
  <div class="search-option option" data-tab="2">
    <select>
      <option>タブ2専用</option>
    </select>
  </div>

  <div class="search-option option" data-tab="3">
    <select>
      <option>タブ3専用</option>
    </select>
  </div>

</div>

<!-- タブ -->
<ul class="tabs">
  <li data-tab="1" class="is-active">検索のみ</li>
  <li data-tab="2">タイプA</li>
  <li data-tab="3">タイプB</li>
</ul>

title.js

document.querySelectorAll('.tabs li').forEach(tab => {
  tab.addEventListener('click', () => {
    const id = tab.dataset.tab;

    // タブのactive
    document.querySelectorAll('.tabs li').forEach(t =>
      t.classList.toggle('is-active', t === tab)
    );

    // いったん全部非表示
    document.querySelectorAll('.option').forEach(opt =>
      opt.classList.remove('is-active')
    );

    // タブ2・3は共通セレクト表示
    if (id === '2' || id === '3') {
      document
        .querySelector('[data-tab="2-3"]')
        .classList.add('is-active');
    }

    // 個別セレクト表示
    if (id !== '1') {
      document
        .querySelector(`.search-option[data-tab="${id}"]`)
        ?.classList.add('is-active');
    }
  });
});