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

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