HTML tabs – Make each tab their own html file

August 10, 2022

I am quite new to using HTML and CSS, and trying to create a page that has different tabs, similar to these instructions. I had previously created a very small standalone weather ‘web app’ to introduce myself to using APIs. This small web app has the HTML, CSS, and Javascript file associated with it, and I’m trying to have that app be one of the tab contents. My tabs are set up like this:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/styles.css"/>
    <title>Main</title>
  </head>
  <div class="tab">
    <button class="tab-link" onclick="openTab(event, 'aboutMe')">About Me</button>
    <button class="tab-link" onclick="openTab(event, 'weatherApp')">Weather App</button>
  </div>

  <div id="aboutMe" class="content">
    <h3>About Me</h3>
    <p>About me information will go here, or another html file source</p>
  </div>

  <div id="weatherApp" class="content">
    <h3>Weather Conditions</h3>
    <p> Weather conditions web app will go here by referencing HTML file</p>
  </div>

  <script src = "./app.js"></script>
  </body>
</html>

Javascript for click event:

function openTab(evt, tabName) {
    // Declare all variables
    let tabcontent; 
    let tablinks;
  
    // Get all elements with class="content" and hide them
    tabcontent = document.getElementsByClassName("content");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
  
    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tab-link");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
  
    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
  }

Is there a way to embed/link the the my webapp.html, so when the Weather Conditions tab is clicked the html shows below?

>Solution :

Usually web frameworks like React or Vue are used for this, but you can use an <iframe> tag (ie: create an iframe then change the src attribute whenever a tab is clicked). I would use iframes sparingly though.