因此,我的目標是創建一個與導航欄一起使用的單頁應用程序。這是一個音樂評論網站,因此導航欄上會顯示“ 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); }}
如何使用導航欄創建單頁應用程序?
元芳怎么了
2021-04-19 16:14:43
