JavaScriptの.querySelectorAll()でアクティブになったタブメニューの背景が左右に動いて表示

elementList = parentNode.querySelectorAll(selectors);

<section class="someTabs" data-tabs="">
  <nav class="tabs__nav">
    <a href="#" class="tabs__item active" data-tab="">Section1-1</a>
    <a href="#" class="tabs__item" data-tab="">Section1-2</a>
    <a href="#" class="tabs__item" data-tab="">Section1-3</a>
    <a class="Tabs__presentation-slider" role="presentation"></a>
  </nav>
  <div class="tabs__body">
    <div class="tabs__content active" data-tab-content=""><p>Section1-1</p><p>山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。山路を登りな</p></div>
        <div class="tabs__content" data-tab-content=""><p>Section1-2</p><p>山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。山路を登りな</p></div>
        <div class="tabs__content" data-tab-content=""><p>Section1-3</p><p>山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。山路を登りな</p></div>
  </div>
</section>
<section class="someTabs" data-tabs="">
  <nav class="tabs__nav">
    <a href="#" class="tabs__item active" data-tab="">Section1-1</a>
    <a href="#" class="tabs__item" data-tab="">Section1-2</a>
    <a href="#" class="tabs__item" data-tab="">Section1-3</a>
    <a class="Tabs__presentation-slider" role="presentation"></a>
  </nav>
  <div class="tabs__body">
    <div class="tabs__content active" data-tab-content=""><p>Section1-1</p><p>山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。山路を登りな</p></div>
        <div class="tabs__content" data-tab-content=""><p>Section1-2</p><p>山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。山路を登りな</p></div>
        <div class="tabs__content" data-tab-content=""><p>Section1-3</p><p>山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。山路を登りな</p></div>
  </div>
</section>

const tabsElems = document.querySelectorAll("[data-tabs]");

if(tabsElems.length > 0){
  for (let i = 0; i < tabsElems.length; i++) {
  let tab = tabsElems[i];
  let tabBtnElems = tab.querySelectorAll("[data-tab]");
  let tabContentElems = tab.querySelectorAll("[data-tab-content]");
  for (let i = 0; i < tabBtnElems.length; i++) {
    let tabBtn = tabBtnElems[i];
    let tabContent = tabContentElems[i];
    tabBtn.addEventListener("click", (e) => {
      e.preventDefault();
      for (let i = 0; i < tabBtnElems.length; i++) {
       tabBtnElems[i].classList.remove('active');
       tabContentElems[i].classList.remove('active');
      }
      tabBtn.classList.add('active');
      tabContent.classList.add('active');
    });
  }
}
}

[data-tab-content]{
  display: none
}

[data-tab-content].active{
  display: block;
}

nav.tabs__nav {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
    margin: 0 0 1rem;
    border: none;
    box-shadow: 0 7px 34px rgb(50 50 93 / 10%), 0 3px 6px rgb(0 0 0 / 8%);
    border-radius: 3px;
    background: #FFF;
}
a.tabs__item {
    width: calc(100% / 3);
    display: flex;
    justify-content: center;
    height: 50px;
    align-items: center;
    text-decoration: none;
}
a.tabs__item.active {
    position: relative;
    z-index: 1;
    color: #FFF;
}
.tabs__item:first-child.active ~ .Tabs__presentation-slider {
  transform: translateX(0) scaleX(0.333);
}
.tabs__item:nth-child(2).active ~ .Tabs__presentation-slider {
  transform: translateX(33.333%) scaleX(0.333);
}
.tabs__item:nth-child(3).active ~ .Tabs__presentation-slider {
  transform: translateX(calc(33.333% * 2)) scaleX(0.333);
}
.Tabs__presentation-slider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  transition: transform 0.25s;
  background: linear-gradient( 45deg , #bdb9ff, #67b8ff);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
  }
}
.tabs__content.active {
    animation: fadeIn 0.7s ease 0s 1 normal;
}