如何使用导航栏创建单页面应用程序？

Question

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.

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.

This is my javascript file and nav bar as follows:

I would really appreciate any help

    pages: [],
    show: new Event('show'),
    init: function(){
        app.pages = document.querySelectorAll('.page');
        app.pages.forEach((pg)=>{
            pg.addEventListener('show', app.pageShown);
        })

        document.querySelectorAll('.nav-link').forEach((link)=>{
            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)=>{
            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: 

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="statichtmlpage.html">Home</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link" href="pop.html">pop</a>
                <a class="nav-item nav-link" href="hiphop.html">hiphop</a>
                <a class="nav-item nav-link" href="jazz.html">jazz</a>
                <a class="nav-item nav-link" href="#">Absolute trash</a>

Answer 1

I got most of this from https://www.w3schools.com/howto/howto_js_tabs.asp
I believe this is close to what you are asking for. Let me know if this solves your problem.
One framework that I would look into is VueJS ( https://vuejs.org/ ). You will be able to accomplish the same outcome with additional features that you could use to enhance your app. If you are interested in server side rendering then I would look into NuxtJS ( https://nuxtjs.org/guide ).

 function transition(genreName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(genreName).style.display = "block"; return tablinks } function openTab(evt, genreName) { transition(genreName) evt.currentTarget.className += " active"; } function tabLink(genreName) { var tablinks = transition(genreName) for (i = 0; i < tablinks.length; i++) { if (tablinks[i].innerHTML == genreName) { tablinks[i].className += " active" } } } 

 /* Style the tab */ .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Style the buttons inside the tab */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 0px solid #ccc; border-top: none; } #Pop { display: block } 

 <div class="tab"> <button class="tablinks active" onclick="openTab(event, 'Pop')">Pop</button> <button class="tablinks" onclick="openTab(event, 'HipHop')">HipHop</button> <button class="tablinks" onclick="openTab(event, 'Jazz')">Jazz</button> </div> <div id="Pop" class="tabcontent"> <h3>Pop</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus ut massa et ullamcorper. In hac habitasse platea dictumst. Quisque tempor odio sit amet aliquam iaculis.</p> <p>If you are feeling Jazzy click <a href="#!" onclick="tabLink('Jazz')">HERE</a></p> </div> <div id="HipHop" class="tabcontent"> <h3>HipHop</h3> <p>Sed eu efficitur lorem. Pellentesque varius nulla nec lectus consectetur ullamcorper. In at urna orci. Sed ut malesuada elit, vel tempor leo.</p> </div> <div id="Jazz" class="tabcontent"> <h3>Jazz</h3> <p>Fusce arcu magna, mollis eu cursus ut, mollis sit amet quam. Aenean mattis turpis vitae iaculis venenatis. Cras tempus gravida quam in malesuada.</p> </div>