Как избежать вложенных циклов forEach для этого сценария содержимого с вкладками?

(function() {
  let contentElms = document.querySelectorAll('.content > div');
  let tabs = document.querySelectorAll('.tabs li');

  // Show first tab initially
  contentElms[0].classList.add("active");
  tabs[0].classList.add("active");
  let contentActive = contentElms[0]
  let tabActive = tabs[0]
  tabs.forEach((tab, index) => {
    tab.addEventListener("click", () => {
      contentActive.classList.remove("active")
      contentActive = contentElms[index]
      contentActive.classList.add("active")

      tabActive.classList.remove("active")
      tabActive = tab
      tabActive.classList.add("active")
    });
  });
})();

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

body * {
  box-sizing: content-box;
}

.tabbed-content {
  max-width: 600px;
  margin: 10px auto;
}

.tabbed-content .tabs ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.tabbed-content .tabs ul li {
  flex: 1;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}

.tabbed-content .tabs ul li.active {
  border-bottom: none;
  font-weight: bold;
}

.tabbed-content .tabs ul a {
  display: block;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  color: #7f7f7f;
}

.tabbed-content .content {
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.tabbed-content .content>div {
  font-size: 14px;
  line-height: 1.5;
  text-align: justify;
  display: none;
}

.tabbed-content .content>div.active {
  display: block;
}

<div class = "tabbed-content">
  <nav class = "tabs">
    <ul>
      <li class = "active"><a href = "#">Tab 1</a></li>
      <li><a href = "#">Tab 2</a></li>
      <li><a href = "#">Tab 3</a></li>
    </ul>
  </nav>
  <div class = "content">
    <div>Nesciunt velit a hic, officia animi veritatis quis obcaecati tempora omnis iusto.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias dolorem, sequi quos unde tempora corporis voluptatibus officia atque voluptatum consequuntur necessitatibus fuga quidem nihil. Perspiciatis reiciendis impedit cupiditate odit veritatis!</div>
    <div>Deserunt est in, ipsum possimus dolorum! Numquam suscipit laborum, reiciendis delectus. Labore?</div>
  </div>
</div>

(function() {
  let contentElms = document.querySelectorAll('.content > div');
  let tabsContainer = document.querySelector('.tabs');

  // Show first tab initially
  contentElms[0].classList.add("active");
  tabsContainer.querySelector('li').classList.add("active");

  // Use event delegation
  tabsContainer.addEventListener("click", (event) => {
    let tab = event.target.closest('li');
    
    if (tab) {
      let index = Array.from(tabsContainer.querySelectorAll('li')).indexOf(tab);

      // Remove active class from all tabs and content
      tabsContainer.querySelectorAll('li').forEach(tab => tab.classList.remove("active"));
      contentElms.forEach(el => el.classList.remove("active"));

      // Add active class to the clicked tab and corresponding content
      tab.classList.add("active");
      contentElms[index].classList.add("active");
    }
  });
})();

body {
     margin: 0;
     padding: 0;
     font-family: Arial, Helvetica, sans-serif;
}
 body * {
     box-sizing: content-box;
}
 .tabbed-content {
     max-width: 600px;
     margin: 10px auto;
}
 .tabbed-content .tabs ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     display: flex;
}
 .tabbed-content .tabs ul li {
     flex: 1;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 4px 4px 0 0;
     overflow: hidden;
}
 .tabbed-content .tabs ul li.active {
     border-bottom: none;
     font-weight: bold;
}
 .tabbed-content .tabs ul a {
     display: block;
     padding: 10px;
     text-align: center;
     text-decoration: none;
     color: #7f7f7f;
}
 .tabbed-content .content {
     padding: 10px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-top: none;
     border-radius: 0 0 4px 4px;
}
 .tabbed-content .content > div {
     font-size: 14px;
     line-height: 1.5;
     text-align: justify;
     display: none;
}
 .tabbed-content .content > div.active {
     display: block;
}

<div class = "tabbed-content">
  <nav class = "tabs">
    <ul>
      <li class = "active"><a href = "#">Tab 1</a></li>
      <li><a href = "#">Tab 2</a></li>
      <li><a href = "#">Tab 3</a></li>
    </ul>
  </nav>
  <div class = "content">
    <div>Nesciunt velit a hic, officia animi veritatis quis obcaecati tempora omnis iusto.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias dolorem, sequi quos unde tempora corporis voluptatibus officia atque voluptatum consequuntur necessitatibus fuga quidem nihil. Perspiciatis reiciendis impedit cupiditate odit veritatis!</div>
    <div>Deserunt est in, ipsum possimus dolorum! Numquam suscipit laborum, reiciendis delectus. Labore?</div>
  </div>
</div>