title: How do I create single page application using a navbar?
body: <p>So I'm aiming to create a single page application that works with a navbar. It is for a music review site, so the navbar will have 'Pop', 'HipHop' and 'Jazz'. I have a separate html page for each of these music genres, but instead I want to just have one big html page. </p>
  
  <p><br>
  I have Javascript code that can make this work, but I'm not sure how to edit the contents of my navbar to allow this to happen.</p>
  
  <p>This is my javascript file and nav bar as follows:</p>
  
  <p>I would really appreciate any help</p>
  
  <pre><code>    pages: [],
      show: new Event('show'),
      init: function(){
          app.pages = document.querySelectorAll('.page');
          app.pages.forEach((pg)=&gt;{
              pg.addEventListener('show', app.pageShown);
          })
  
          document.querySelectorAll('.nav-link').forEach((link)=&gt;{
              link.addEventListener('click', app.nav);
          })
          history.replaceState({}, 'Home', '#home');
          window.addEventListener('popstate', app.poppin);
      },
      nav: function(ev){
          ev.preventDefault();
          let currentPage = ev.target.getAttribute('data-target');
          document.querySelector('.active').classList.remove('active');
          document.getElementById(currentPage).classList.add('active');
          console.log(currentPage)
          history.pushState({}, currentPage, `#${currentPage}`);
          document.getElementById(currentPage).dispatchEvent(app.show);
      },
      pageShown: function(ev){
          console.log('Page', ev.target.id, 'just shown');
          let h1 = ev.target.querySelector('h1');
          h1.classList.add('big')
          setTimeout((h)=&gt;{
              h.classList.remove('big');
          }, 1200, h1);
      },
      poppin: function(ev){
          console.log(location.hash, 'popstate event');
          let hash = location.hash.replace('#' ,'');
          document.querySelector('.active').classList.remove('active');
          document.getElementById(hash).classList.add('active');
          console.log(hash)
          //history.pushState({}, currentPage, `#${currentPage}`);
          document.getElementById(hash).dispatchEvent(app.show);
      }
  }
  
  document.addEventListener('DOMContentLoaded', app.init);
  
  NAVBAR: 
  
      &lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
          &lt;a class="navbar-brand" href="statichtmlpage.html"&gt;Home&lt;/a&gt;
          &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class="collapse navbar-collapse" id="navbarNavAltMarkup"&gt;
              &lt;div class="navbar-nav"&gt;
                  &lt;a class="nav-item nav-link" href="pop.html"&gt;pop&lt;/a&gt;
                  &lt;a class="nav-item nav-link" href="hiphop.html"&gt;hiphop&lt;/a&gt;
                  &lt;a class="nav-item nav-link" href="jazz.html"&gt;jazz&lt;/a&gt;
                  &lt;a class="nav-item nav-link" href="#"&gt;Absolute trash&lt;/a&gt;
  </code></pre>