鍍金池/ 問答/HTML5  Java  HTML/ 點(diǎn)擊左邊的菜單欄，不刷新頁面，只改變body內(nèi)容，如何實(shí)現(xiàn)？

點(diǎn)擊左邊的菜單欄，不刷新頁面，只改變body內(nèi)容，如何實(shí)現(xiàn)？

點(diǎn)擊左邊的菜單欄，不刷新頁面，只改變body內(nèi)容，最好可以共享父頁面的js和css，而不是重新加載，如何實(shí)現(xiàn)？
目前遇到的問題是，使用jquery.load()方法引入頁面的話，會(huì)造成js重復(fù)加載，每點(diǎn)擊一次菜單欄加載次數(shù)加1。
除了jquery.load()，有沒有更優(yōu)雅的解決方案？
圖片描述

回答
編輯回答
氕氘氚

jquery.load() 不會(huì)有這個(gè)問題，在沒有 Vue 之前我就是這么做的。

我估計(jì)問題在于你 load 進(jìn)來的頁面不是“代碼片段”，而是完整的頁面，你需要處理一下。

2018年7月27日 09:57
編輯回答
尕筱澄

你可以把body中需要加載數(shù)據(jù)的所有方法封裝成一個(gè)獨(dú)立的方法，點(diǎn)擊左側(cè)邊欄的時(shí)候，執(zhí)行一遍你封裝的這個(gè)方法。這樣能做到局部的刷新

2017年1月6日 20:22
編輯回答
終相守

如果你是使用jquery，建議使用template.js模版，或者dust模版的寫法；
具體實(shí)施：

  • 先在主頁面html里邊搭建頁面主框架，也就是將頁面布局為左側(cè)菜單，頭部導(dǎo)航，就是你圖片中的這部分：

clipboard.png

  • 然后再定義不同的模版頁面，當(dāng)點(diǎn)擊左側(cè)導(dǎo)航的時(shí)候切換刷新主內(nèi)容區(qū)域的模版就可以了
2017年1月7日 15:45