<ul class="work__step-list">
  <li class="work__step_item">
    <button class="work__step-btn" data-path="one">1 шаг</button>
  </li>
  <li class="work__step_item">
    <button class="work__step-btn" data-path="two">2 шаг</button>
  </li>
  <li class="work__step_item">
    <button class="work__step-btn" data-path="three">3 шаг</button>
  </li>
  <li class="work__step_item">
    <button class="work__step-btn" data-path="four">4 шаг</button>
  </li>
</ul>
<div class="work__steps">
  <div class="work__left">
    <div class="work__step_tab tab_active" data-target="one">
      <h3 class="work__step_title">Lorem ipsum 1</h3>
      <p class="work_step_description">Lorem ipsum 1</p>
    </div>
    <div class="work__step_tab" data-target="two">
      <h3 class="work__step_title">Lorem ipsum 2</h3>
      <p class="work_step_description">Lorem ipsum 2</p>
    </div>
    <div class="work__step_tab" data-target="three">
      <h3 class="work__step_title">Lorem ipsum 3</h3>
      <p class="work_step_description">Lorem ipsum 3</p>
    </div>
    <div class="work__step_tab" data-target="four">
      <h3 class="work__step_title">Lorem ipsum 4</h3>
      <p class="work_step_description">Lorem ipsum 4</p>
    </div>
  </div>
</div>

.work__step_tab{
  display: none;
}
.tab_active{
  display: block;
}

console.log('Начало скрипта Табов')
console.log('Загрузка ДОМ-дерева')
document.addEventListener('DOMContentLoaded', function () {
  // console.log(document.querySelectorAll('.work__step-btn'))
  document.querySelectorAll('.work__step-btn').forEach(function (tabsBtn) {
    console.log(tabsBtn)
    tabsBtn.addEventListener('click', function (event) {
      const way = event.currentTarget.dataset.path
      console.log(way)
      document.querySelectorAll('.work__step_tab').forEach(function (tabContent) {
        tabContent.classList.remove('tab_active')
      })
      document.querySelector(`[data-target="${way}"]`).classList.add('tab_active')
    })
  })
})