Die sogenannten Tabs sind Elemete in einer Webseite wo man verschiedene Inhalte mehrmals am gleichen Ort positionieren kann und der Wechsel macht man über einen einfachen Button. Tabs gehören heute zur Grundausstattung einer Webseite. Ich persönlich mag sie nur bedingt, denn meistens sind sie immer sehr chaotisch.

Heute zeige ich euch wie man so ein Tag mit wenigen Zeilen Code erstellen kann. Ihr lernt auch wie man die Buttons mit den Container Felder verlinkt, so dass ihr jetzt in der Lage seid diese Tabs selbt zu erstellen.

Video

HTML

<div class="tab-button">
      <input type="radio" name="tabs" id="tab-nav-1" checked />
      <label for="tab-nav-1">HTML</label>
      <input type="radio" name="tabs" id="tab-nav-2" checked />
      <label for="tab-nav-2">CSS</label>
      <input type="radio" name="tabs" id="tab-nav-3" checked />
      <label for="tab-nav-3">Javascript</label>
      <input type="radio" name="tabs" id="tab-nav-4" checked />
      <label for="tab-nav-4">PHP</label>
      <div class="tabs">
        <div>
          <h2>HTML</h2>
          <p>
            HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML
            HTML HTML HTML HTML HTML
          </p>
        </div>
        <div>
          <h2>CSS</h2>
          <p>
            CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS
          </p>
        </div>
        <div>
          <h2>Javascript</h2>
          <p>
            Javascript Javascript Javascript Javascript Javascript Javascript
            Javascript Javascript Javascript Javascript Javascript Javascript
            Javascript Javascript Javascript Javascript Javascript Javascript
            Javascript Javascript Javascript Javascript Javascript Javascript
            Javascript Javascript Javascript Javascript Javascript Javascript
            Javascript Javascript Javascript Javascript Javascript Javascript
            Javascript Javascript Javascript Javascript Javascript Javascript
            Javascript Javascript Javascript Javascript Javascript Javascript
            Javascript Javascript Javascript
          </p>
        </div>
        <div>
          <h2>PHP</h2>
          <p>
            PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP
            PHP
          </p>
        </div>
      </div>
    </div>

CSS

body {
  background: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

label,
p {
  color: var(--schrift);
}
h2 {
  margin-top: 20px;
  margin-bottom: 30px;
  color: var(--schrift);
}

.tab-button {
  width: 700px;
}

.tab-button > input {
  display: none;
}
.tab-button > label {
  display: block;
  float: left;
  padding: 12px 20px;
  margin-right: 5px;
  cursor: pointer;
  transition: background-color 300ms;
}

.tab-button > label:hover,
.tab-button > input:checked + label {
  background: var(--tab);
}

.tabs {
  clear: both;
  perspective: 600px;
}

.tabs > div {
  width: 700px;
  position: absolute;
  border: 2px solid var(--tab);
  padding: 10px 30px 40px;
  line-height: 1.5em;
  opacity: 0;
  transform: rotateX(-90deg);
  transform-origin: top center;
  transition: opacity 300ms, transform 1000ms;
  z-index: 0;
}

#tab-nav-1:checked ~ .tabs > div:nth-of-type(1),
#tab-nav-2:checked ~ .tabs > div:nth-of-type(2),
#tab-nav-3:checked ~ .tabs > div:nth-of-type(3),
#tab-nav-4:checked ~ .tabs > div:nth-of-type(4) {
  transform: rotateX(0);
  opacity: 1;
  z-index: 1;
}