tabs.html

<div>
  <div class="tabs">
    <div class="switchy-tab active" data-section-id="section1">tab1</div>
    <div class="switchy-tab" data-section-id="section2">tab2</div>
    <div class="switchy-tab" data-section-id="section3">tab3</div>
  </div>

  <div className="sections">
    <div class="switchy-section active" id="section1">stuff 1 </div>
    <div class="switchy-section" id="section2">stuff 2</div>
    <div class="switchy-section" id="section3">stuff 3</div>
  </div>
</div>
<script>
  document.querySelectorAll('.switchy-tab').forEach(function(tab) {
      if (tab.dataset.sectionId) {
        tab.onclick = function(e) {
            document.querySelectorAll('.switchy-tab').forEach(function(section) {
              section.classList.remove('active')
              tab.classList.add('active')
            })
            document.querySelectorAll('.switchy-section').forEach(function(section) {
              section.classList.remove('active')
            })
            document.getElementById(e.currentTarget.dataset.sectionId).classList.add('active')
        }
      }
    })
</script>
<style>
.active {
  background-color: green;
}
</style>