Widget Tabs

Live-Beispiel

HTML-Quelltext

<div class="tabs">
  <div role="tablist">
    <button type="button" role="tab" aria-selected="true" aria-controls="tabcontent-104571-695" id="tab-104571-695" >Weitere Angebote</button>
    <button type="button" role="tab" aria-selected="false" aria-controls="tabcontent-104571-696" id="tab-104571-696" tabindex="-1" >Survey Guidelines</button>
    <button type="button" role="tab" aria-selected="false" aria-controls="tabcontent-104571-697" id="tab-104571-697" tabindex="-1" >Forschung</button>
  </div>
  <div tabindex="0" role="tabpanel" id="tabcontent-104571-695" aria-labelledby="tab-104571-695" >
    <ul>
      <li>Neuentwicklung von sozialwissenschaftlichen Messinstrumenten</li>
      <li><a href="/angebot/studien-planen-und-daten-erheben/kognitives-pretesting">Kognitives Pretesting</a></li>
      <li>Übersetzung von Messinstrumenten in internationalen Umfragen</li>
    </ul>
  </div>
  <div tabindex="0" role="tabpanel" id="tabcontent-104571-696" aria-labelledby="tab-104571-696" hidden="until-found" >
    <p><strong>Weiterführende Artikel in den GESIS Survey Guidelines: </strong></p>
    <p>Standardisierung und Harmonisierung sozio-demographischer Variablen</p>
    <p>Berufscodierung</p>
    <p>Messung und Kodierung von Bildung</p>
  </div>
  <div tabindex="0" role="tabpanel" id="tabcontent-104571-697" aria-labelledby="tab-104571-697" hidden="until-found" >
    <p><a href="/forschung/forschungsbereich-survey-methodology/repraesentation-und-stichprobe">Instrumentenentwicklung und -dokumentation</a></p>
  </div>
</div>

// initializeTabContainers(..) is a globally scoped function
// for initializing an array of .tab HTML elements.
// it returns an array of initialized TabContainer objects
const tabContainersElements = someElement.getElementsByClassName('tabs');
const tabContainers = initializeTabContainers(tabContainersElements);

// ...

// TabContainer(..) is a globally scoped constructor
const anotherTabContainerElement = document.getElementById('another-tab-container');
const anotherTabContainer = new TabContainer(anotherTabContainerElement);

import { TabContainer } from './js/gesis-tabs.js';

document.addEventListener('DOMContentLoaded', function() {

  const tabContainersElements = document.getElementsByClassName('tabs');
  for (const tabContainerElement of tabContainersElements) {
    const tabContainer = new TabContainer(tabContainerElement);
  }

});