Verschachtelte Tabs mit html umsetzen

Hades · 13. Januar 2019

Hallo zusammen,

versuche ein einfaches Tab-Beispiel zu verschachteln aber irgendwie funktioniert das nicht wie ich mir das wünsche.

Ich habe einmal den Code in jsfiddle kopiert, dort wird aber das verschachtelte Tab nicht angezeigt.

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 2px solid #ccc;
  background-color: #ffe3c9;
  font-weight: bold;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 14px;
  color: #000000;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: rgba(224,129,21,0.51);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: rgba(224,129,21,0.51);
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>
</head>
<body>

  <div class="tab">
    <button class="tablinks" onclick="openCity(event,'Allgemein')" id="defaultOpen">Allgemein</button>
    <button class="tablinks" onclick="openCity(event,'Errungenschaften')">Errungenschaften</button>
    <button class="tablinks" onclick="openCity(event,'Fortschritt')">Fortschritt</button>
    <button class="tablinks" onclick="openCity(event,'Chat')">Chat</button>
    <button class="tablinks" onclick="openCity(event,'Forschung')">Forschung</button>
  </div>
  <div id="Allgemein" class="tabcontent">
    <p>Allgemein.</p>
  </div>
  <div id="Errungenschaften" class="tabcontent">
    
                <div class="tab">
                <button class="tablinks" onclick="openCity(event,'Punktezahl')" id="defaultOpen">Punktezahl</button>
                <button class="tablinks" onclick="openCity(event,'Militaer')">Militär</button>
                <button class="tablinks" onclick="openCity(event,'Wirtschaft')">Wirtschaft</button>
                <button class="tablinks" onclick="openCity(event,'Forschung')">Forschung</button>
                <button class="tablinks" onclick="openCity(event,'Gesellschaft')">Gesellschaft</button>
                </div>
                <div id="Punktezahl" class="innertabcontent">
                <p>Punktezahl.</p>
                </div>
                <div id="Militaer" class="innertabcontent">
                <p>Militär.</p>
                </div>
                <div id="Wirtschaft" class="innertabcontent">
                <p>Wirtschaft.</p>
                </div>
                <div id="Forschung" class="innertabcontent">
                <p>Forschung.</p>
                </div>
                <div id="Gesellschaft" class="innertabcontent">
                <p>Gesellschaft.</p>
                </div>
  </div>
  <div id="Fortschritt" class="tabcontent">
    <p>Fortschritt.</p>
  </div>
  <div id="Chat" class="tabcontent">
    <p>Chat.</p>
  </div>
  <div id="Forschung" class="tabcontent">
    <p>Forschung.</p>
  </div>

<script>
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

function openCity(evt, tabName) {
  var i, tabcontent, innertabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  
  innertabcontent = document.getElementsByClassName("innertabcontent");
  for (i = 0; i < innertabcontent.length; i++) {
    innertabcontent[i].style.display = "none";
  }
  
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

</script>

</body>
</html>

Alles anzeigen

basti1012 · 13. Januar 2019

Ganz wichtig erstmal die doppelten Id's beseitigen.

Dann nochmal nach denken.

Wenn du die 2 te Reihe ja anklicken willst tust du die ja auch gleichzeitig wieder auf display:none; setzen.

Deswegen verschwindet die auch gleich wieder beim anklicken.

Ich habe das mal getestet und habe 2 Functionen raus gemacht und dann geht das auch schon bestens.

Auch ne kleine if Abfrage wäre möglich.

Trotzdem könnte man den Code noch mit querySelectorAll um einiges kürzen und vereinfachen.

Noch einfacher geht es mit Jquery,aber wer das nicht schon nutzt sollte es für so nee kleine aktion auch nicht unbedingt einbinden.

Hades · 14. Januar 2019

Code

function openCity(evt, cityName) {

  var i,temp, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  
  if(cityName === "Berlin" || cityName === "Madrid" || cityName === "Koeln"){
      document.getElementById("Paris").style.display = "block";
    tablinks[1].className += " active";
    
    console.log(temp);
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
  console.log(evt.currentTarget.className);
}

Alles anzeigen

Mir stellt sich nur noch eine Frage

Code

tablinks[1].className += " active";

Ist ein solcher Index-Aufruf sicher vor Asynchronität? Also ist das Array immer in der selben Reihenfolge geordnet? Nach meinem Verständnis schon, weil so etwas alles Clientseitig bearbeitet wird, aber möchte nur sicher gehen.

Arne Drews · 14. Januar 2019

Solange Du Deinen Dokumenten-Aufbau nicht veränderst irgendwann, sollte das gleich sein, weil das DOM sequentiell von oben nach unten durchsucht wird. Der erste Treffer ist die 0 usw.

basti1012 · 14. Januar 2019

Meine Lösung sah so aus. Falls es noch interessieren sollte.

https://basti1012.bplaced.net/…rdner=html-seminar&id=347

Arne Drews · 14. Januar 2019

Wo ich das gerade sehe, dafür muss man doch noch nicht zu JS greifen, das sollte mit CSS umsetzbar sein...

Verschachtelte Tabs mit html umsetzen

Jetzt mitmachen!

Teilen