Salesforce LWC - Loop through list to display Lightning Design System Tabs

Always use base components before you try building your own.

There is a lighnting-tabset component that makes this easier.

<template>
   <lightning-tabset>
      <template for:each={test} for:item="layer">
        <lightning-tab label="Item One" key={layer}>
           {layer}
        </lightning-tab>
      </template>
     </lightning-tabset>
   </template>

The controller

 import { LightningElement, track } from 'lwc';

 export default class App extends LightningElement {

     test = ["Test1","Test2"]
  }

Update: Custom LWC Version - Highly recommended to avoid this unless you plan to use custom CSS.

Explore Styling Hooks before you go down this custom path

If you want to purely use LDS and JavaScript and want to go the custom route explore the below sample code

<template>
<div class="slds-tabs_default">
    <ul class="slds-tabs_default__nav" role="tablist">
        <template for:each={test} for:item="layer">
            <li class="slds-tabs_default__item slds-is-active" title="Item One" role="presentation" key={layer}>
                <a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls= {layer} id= {layer}>{layer}</a>
            </li>
        </template>
    </ul>
    <template for:each={test} for:item="layer">
        <div id={layer} class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="Test1" key={layer}> Content</div>
    </template>
   </div>
</template>

Edit 2 Updated code

   <template>
     <div class="slds-tabs_default">
       <ul class="slds-tabs_default__nav" role="tablist">
        <template for:each={tabs} for:item="layer">
            <li class="slds-tabs_default__item slds-is-active" title="Item One" role="presentation" key={layer.Id}>
                <a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0"
                    aria-selected="true" aria-controls={layer} id={layer.Id} data-link={layer.Id}
                    onclick={handleClick}>{layer.title}</a>
            </li>
        </template>
    </ul>
    <div class="tabs">
        <template for:each={tabs} for:item="layer">
            <div id={layer.Id} class={layer.cssClass} data-id={layer.Id} role="tabpanel" aria-labelledby={layer.Id}
                key={layer.Id}>
                {layer.Content}
            </div>
           </template>
       </div>
     </div>
  </template>

JS Controller

 import {
    LightningElement,
    track
  } from 'lwc';

export default class App extends LightningElement {

  tabs = [{
    title: 'Test1',
    Content: 'Content1',
    Id: '1',
    cssClass: 'slds-tabs_default__content slds-show'
}, {
    title: 'Test2',
    Content: 'Content2',
    Id: '2',
    cssClass: 'slds-tabs_default__content slds-hide'
}];

handleClick(event) {
    this.tabs = this.tabs.map(tab => {
        if(tab.Id === event.target.dataset.link) {
            tab.cssClass = 'slds-tabs_default__content slds-show';
        } else {
            tab.cssClass = 'slds-tabs_default__content slds-hide';
        }
        return tab;
      });
    }
  }

To play with this component, use this url