Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

255
Visualizações
How to dynamically add tabs in HTML/JavaScript?

im a novice when it comes to this HTML stuff, so im not sure how to get this to work. Ive been following this description of tabs https://www.w3schools.com/howto/howto_js_tabs.asp

Im periodically sending a GET request and receiving a string ID, so i want to create a tab for each unique ID I receive, but im not sure how to do this.

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">SOAP5</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">GDAL</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">IDK</button>
</div>

<div id="London" class="tabcontent" style="height:100%;">
  <!--#include virtual='navigation.htm' -->
</div>

<div id="Paris" class="tabcontent" style="height:100%;">
  <!--#include virtual='navigation.htm' -->
</div>

<div id="Tokyo" class="tabcontent" style="height:100%;">
  <!--#include virtual='navigation.htm' -->
</div>

<script>
function openCity(evt, cityName) {
  var i, 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", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

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

function RefreshData() {
  var xmlhttp = new XMLHttpRequest();
  // Periodic data request
  var intervalID = setInterval(function GetData() {
    xmlhttp.open('GET', 'formInfo.htm', true);
    if ((xmlhttp.readyState = xmlhttp.OPENED)) {
      xmlhttp.send();
    }
  }, 1000);

  xmlhttp.onreadystatechange = function () {
    if (this.readyState === this.DONE) {
      UpdateTabs(xmlhttp);
    }
  };
}

function UpdateTabs(xmlhttp) {
  //How to create new tabs here?
}

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda