<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>