jsでもっとちゃんとタブUIを実装する（jQuery不使用）- ページ更新してもタブがリセットされないやり方

<div class="tab-container">
  <nav class="tabs">
    <a href="#tab1" class="tab">tab1</a>
    <a href="#tab2" class="tab">tab2</a>
    <a href="#tab3" class="tab">tab3</a>
  </nav>
  <div id="tab1" class="tab-cont">
    <h2>tab1-title</h2>
    <div>
      tab1のコンテンツ
    </div>
  </div>
  <div id="tab2" class="tab-cont">
    <h2>tab2-title</h2>
    <div>
      tab2のコンテンツ
    </div>
  </div>
  <div id="tab3" class="tab-cont">
    <h2>tab3-title</h2>
    <div>
      tab3のコンテンツ
    </div>
  </div>
</div>

.tab-container {
  --border-color: #ccc;
  --active-color: beige;
  --inactive-color: lightgray;
  --container-width: 500px;
  
  max-width: var(--container-width);
  margin-right: auto;
  margin-left: auto;
  padding: 30px;
  
  .tabs {
    display: flex;
    column-gap: 4px;
    position: relative;
    bottom: -1px;
    left: 15px;
  }

  .tab {
    border: solid 1px var(--border-color);
    padding: 10px 15px;
    line-height: 1;
    border-radius: 6px 6px 0 0;
    background-color: var(--inactive-color);

    &.active {
      border-bottom-color: var(--active-color);
      background-color: var(--active-color);
    }
  }

  .tab-cont {
    border: solid 1px var(--border-color);
    padding: 30px;
    border-radius: 6px;

    &.hidden {
      display: none; 
    }

    &.active {
      display: block; 
      background-color: var(--active-color);
    }
  }
}

(function tabUnit(){
  
  const tabs = document.querySelectorAll('.tab');
  const tabConts = document.querySelectorAll('.tab-cont');
  const tabUnit = document.querySelector('.tab-container');
  
  tabUnit.addEventListener('selectTab', (e) => {
    resetTabs();
    setTab(e.detail);
  }, false);
  
  function resetTabs() {
    tabConts.forEach((tabCont) => {
      tabCont.classList.remove('active');
      tabCont.classList.add('hidden');
    });
    tabs.forEach((tab) => {
      tab.classList.remove('active');
    });
  }
  
  function setTab(hashString) {
    Array.from(tabs).some((tab) => {
      if (tab.getAttribute('href') === hashString) {
        tab.classList.add('active');
        return true;
      }
    });
    
    Array.from(tabConts).some((tabCont) => {
      if (tabCont.getAttribute('id') === hashString.slice(1)) {
        tabCont.classList.add('active');
        return true;
      }
    });
  }
  
  document.addEventListener("DOMContentLoaded",() => {
    const hash = location.hash;
    let nextHash = '';
    if (hash === '') {
      nextHash = document.querySelector('.tab').getAttribute('href');
    } else {
      nextHash = hash;
    }
    const evt = new CustomEvent('selectTab', {detail: nextHash});
    tabUnit.dispatchEvent(evt);
  });

  tabs.forEach((tab) => {
    tab.addEventListener("click",(e) => {
      e.preventDefault();
      const nextHash = e.currentTarget.getAttribute('href');
      history.pushState('', '', nextHash);
      const evt = new CustomEvent('selectTab', {detail: nextHash});
      tabUnit.dispatchEvent(evt);
    });
  });

})();

// NG
const tabs = document.querySelectorAll('.tab');
tabs.forEach((tab, index) => {
  if(index === 1) {
    // tabを有効化する処理
    break; // 一つだけ処理できればその後は不要なので抜け出したい。でもNG
  }
});

const tabs = document.querySelectorAll('.tab');
Array.from(tab).some((tab, index) => {
  if(index === 1) {
    // tabを有効化する処理
    return true // trueを返せばループを抜ける
  }
});