亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用導航欄創建單頁應用程序?

如何使用導航欄創建單頁應用程序?

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

1 回答

  • 1 回答
  • 0 關注
  • 198 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號