HTML tabs - Make each tab their own html file-CodePudding

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 >
    <button  onclick="openTab(event, 'aboutMe')">About Me</button>
    <button  onclick="openTab(event, 'weatherApp')">Weather App</button>
  </div>

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

  <div id="weatherApp" >
    <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  and hide them
    tabcontent = document.getElementsByClassName("content");
    for (i = 0; i < tabcontent.length; i  ) {
      tabcontent[i].style.display = "none";
    }
  
    // Get all elements with  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?

CodePudding user response：

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.