• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

157
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?
}

almost 3 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 Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda