Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

258
Vistas
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 la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda