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

Question

因此，我的目标是创建一个与导航栏一起使用的单页应用程序。这是一个音乐评论网站，因此导航栏上会显示“ Pop”，“ HipHop”和“ Jazz”。对于每种音乐类型，我都有一个单独的html页面，但我只想拥有一个大的html页面。

我有可以使此功能起作用的Javascript代码，但是我不确定如何编辑导航栏的内容以使这种情况发生。

这是我的javascript文件和导航栏，如下所示：

我真的很感谢您的帮助

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

    }

}