Simple page switching function

page-switcher.js

let displayType = 'flex';

function switchPage(page) {
  const pages = document.querySelectorAll('.page-container');
    for (let i = 0; i < pages.length; i++) {
      if (pages[i].getAttribute('page') === page) {
        pages[i].style.display = displayType;
      } else {
        pages[i].style.display = 'none';
      }
   }
}

Example:

 <a onclick="switchPage('user')">Go To User Page</a>

<div class="page-container" id="homePage" page="home" style="display: flex;">
    <h1>Home Page</h1>
</div>

<div class="page-container" id="userPage" page="user" style="display: none;">
    <h1>User Page</h1>
</div>

<!-— Home Page will be visible on the start of the page but not userPage but if the user clicks Go To User Page the homePage will be invisible —-> 

To use any other displaytype other the flex just change the variable!