Cacher is the code snippet organizer for pro developers

<style>
   li{
     list-style-type: none;
     display: inline;
     padding: 5px;
   }
   .pages{
     display: none;
   }
</style>

<div class="tabs">
  <li> <a href="#" onClick="tab(home)">HOME </a></li>
  <li> <a href="#" onClick="tab(aboutus)">ABOUT US </a></li>
</div>

<div class="tabContent">
  <p class="pages" id="home">
    THIS IS THE HOMEPAGE
  </p>
  <p class="pages" id="aboutus">
    THIS IS THE ABOUT US PAGE
  </p>
</div>


<script>
 
  function tab(page){
    console.log(page); //this is already the actual element
    let tabContent = document.getElementsByClassName('pages');
 
    var x=0;
    for(x=0; x < tabContent.length; x++){
      tabContent[x].style.display = 'none';
    }
    page.style.display = 'block';
  }
</script>