Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

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

7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos