Beiträge von Hades

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.

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.

https://jsfiddle.net/zae27o4f/

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

Beiträge von Hades

Verschachtelte Tabs mit html umsetzen

Verschachtelte Tabs mit html umsetzen