Script Editor

HTML: copy HTML

<div class="tabs">
  <div class="tabfields">
    <button class="tablinks" onclick="openTabs(event, 'Space')">Space</button>
    <button class="tablinks" onclick="openTabs(event, 'Ocean')">Ocean</button>
    <button class="tablinks" onclick="openTabs(event, 'Technology')">Technology</button>
  </div>

<div id="Space" class="tabcontent clearfix">
    <h3>Weltraum</h3>
    <img src="scripte/img/content/img_m_06.jpg" alt="Bild 06">
    <p>Der Weltraum ist ein unendliches, faszinierendes Universum voller Geheimnisse. Von den ersten menschlichen Raumfahrtmissionen bis hin zu den neuesten Entdeckungen von Schwarzen Löchern und Exoplaneten, der Weltraum bleibt ein Bereich voller ungelöster Rätsel und aufregender Möglichkeiten. Forscher auf der ganzen Welt arbeiten ständig daran, unser Wissen über das Universum zu erweitern.</p>
  </div>

<div id="Ocean" class="tabcontent clearfix">
    <h3>Ozeane</h3>
    <img src="scripte/img/content/img_m_03.jpg" alt="Bild 03">
    <p>Die Ozeane bedecken etwa 70% der Erdoberfläche und sind die Lebensräume von Millionen von Arten, die wir noch nicht einmal vollständig entdeckt haben. Die Tiefen der Ozeane sind für die Menschheit weitgehend unerforscht, aber jedes Jahr werden neue, erstaunliche Meereslebewesen entdeckt, die uns zeigen, wie wenig wir noch über unsere eigenen Ozeane wissen.</p>
  </div>

<div id="Technology" class="tabcontent clearfix">
    <h3>Technologie</h3>
    <img src="scripte/img/content/img_m_07.jpg" alt="Bild 07">
    <p>Technologie verändert die Welt in rasantem Tempo. Von künstlicher Intelligenz und Robotik bis hin zu den neuesten Fortschritten in der Quantencomputing: Die technologische Entwicklung eröffnet immer neue Horizonte. Unternehmen und Forschungseinrichtungen weltweit arbeiten daran, innovative Lösungen zu schaffen, die das tägliche Leben verbessern und die Herausforderungen der Zukunft meistern.</p>
  </div>
</div>

CSS: copy CSS

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.tabs {
  width: 90%;
  max-width: 900px;
  margin: 20px auto 0px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.tabs .tabfields {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tabs .tabfields button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tabs .tabfields button:hover {
  background-color: #ddd;
}

.tabs .tabfields button.active {
  background-color: #ccc;
}

.tabs .tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.tabs .tabcontent h3 {
  font-size: 22px;
  color: #3f3f3f;
  font-weight: lighter;
}

.tabs .tabcontent p {
  font-size: 14px;
  color: #3f3f3f;
}

.tabs .tabcontent img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 200px;
  float: left;
  margin: 0px 10px 5px 0px;
}

/* Responsive Design ab max-width 900px */
@media screen and (max-width: 900px) {
  .tabs .tabfields button {
    float: none;
    width: 100%;
    text-align: left;
  }

.tabs .tabcontent img {
    float: none;
    margin: 0 0 10px 0;
    max-width: 100%;
  }
}

JavaScript: copy JS