JavaScriptの.querySelectorAll()で水平方向メニューのタブ

<section class="someTabs" data-tabs>
  <nav class="tabs__nav">
    <div class="tabs__btnBlock">
    <a href="#" class="tabs__item active" data-tab><span>Section1-1</span></a>
    <a href="#" class="tabs__item" data-tab><span>Section1-2</span></a>
    <a href="#" class="tabs__item" data-tab><span>Section1-3</span></a>
    </div>
  </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');
    });
  }
}
}

.someTabs {
    display: flex;
    justify-content: flex-start;
}
/* 左側 */
.tabs__nav {
    width: 200px;
    display: flex;
    flex-direction: column;
}
.tabs__btnBlock {
    border: solid 1px #eee;
    display: flex;
    flex-direction: column;
    border-right: none;
    height: 100%;
}
.tabs__item {
    background: #FFF;
    height: calc(100% / 3);
    line-height: 1;
    display: block;
    border-bottom: solid 1px #eee;
    position: relative;
}
.tabs__item span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 20px;
}
.tabs__item:last-child {
    border-bottom: none;
}
.tabs__item:hover {
    text-decoration: none;
    opacity: 0.8;
}
.tabs__item.active {
    background: linear-gradient( 45deg , #bdb9ff, #67b8ff);
    color: #FFF;
}
.tabs__item.active:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -10px;
    border: 10px solid transparent;
    border-left: 10px solid #74b8ff;
}

/* 右側 */
.tabs__body {
    width: calc(100% - 200px);
    padding: 25px 35px;
    border: solid 1px #eee;
    background: #FFF;
    min-height: 380px;
}
[data-tab-content]{
  display: none
}
[data-tab-content].active{
  display: block;
}
.tabs__content p {
    margin: 0;
}
.tabs__content.active {
    animation: fadeInLeft 0.7s ease 0s 1 normal;
}

/* FadeIn */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
  }
}

@media screen and (max-width: 767px) {
/* （ここにモバイル用スタイルを記述） */
  .tabs__nav {
    width: 115px;
  }
  .tabs__body {
    width: calc(100% - 115px);
    padding: 15px 10px 15px 20px;
    min-height: auto;
  }
  .tabs__content {
    max-height: 350px;
    overflow-y: scroll;
    padding-right: 5px;
  }
.tabs__content::-webkit-scrollbar {
      width: 10px;
}
.tabs__content::-webkit-scrollbar-thumb {
  background: #666;
}
::-webkit-scrollbar-track {
      background-color: #f0f0f0;
}
}