[問題] 新手請教 jQuery .load()的問題

看板Ajax作者 (GOGOG)時間10年前 (2014/07/17 20:28), 編輯推噓4(4017)
留言21則, 6人參與, 最新討論串1/1
各位先進大家好 想請教一個問題 假設我有個index.html 做了個menu <div id="menu"> <a href="index.html" id="home">Home</a> <a href="#" id="about">About</a> <a href="#" id="contact">Contact</a> </div> <div id="content"> XXXXXXXXXXXXXX </div> 其中About與Contact都是獨立的html檔,分別為about.html跟contact.html 我想在按下About或Contact時,div content的內容會變成about.html跟contact.html的 但我不想重新製作網頁其他部份,所以只想抽取about.html的content部份 所以我這樣寫 $(document).ready(function(){ $('#about').click(function(){ $('#content').load('about.html #content'); } }); 但似乎都沒有反應,請問我是哪裡上述程式碼哪兒有問題呢?? 依照這個程式碼,讀取完後URL的部份應該還是保持在index.html 如果想同時變換網頁內容,其URL也同時變換,我該如何修正呢???? 不然似乎無法按上一頁,回到之前的內容 希望各位能幫我解答,大感謝各位 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.163.139.151 ※ 文章網址: http://www.ptt.cc/bbs/Ajax/M.1405600107.A.7FC.html

07/17 21:38, , 1F
load 不是這樣用的 他只能指定 load 進來的檔案 url
07/17 21:38, 1F

07/17 21:39, , 2F
後面的 #content 是無效的
07/17 21:39, 2F

07/17 21:39, , 3F
你可以先把 .html 當純文字讀進來存到字串 再把 #content
07/17 21:39, 3F

07/17 21:40, , 4F
抓出來寫進去目前網頁
07/17 21:40, 4F

07/17 21:40, , 5F
然後上一頁 回到之前的內容 關鍵字是 pushtstate
07/17 21:40, 5F

07/17 21:43, , 6F
可以這樣用的呀 http://api.jquery.com/load/
07/17 21:43, 6F

07/17 21:59, , 7F
oh, wow
07/17 21:59, 7F

07/17 22:01, , 8F
那...原 PO 是在本機測試嗎? 有架 http 伺服器嗎?
07/17 22:01, 8F

07/17 22:18, , 9F
我是在本機測試!!!!!ㄎㄎ
07/17 22:18, 9F

07/17 22:19, , 10F
謝謝前兩位前輩協助!!!pushstate很神奇
07/17 22:19, 10F

07/17 22:19, , 11F
雖然還沒有很懂,但我努力會去瞭解的..再次感謝囉!!!
07/17 22:19, 11F

07/17 22:20, , 12F
請問s25g5d4,如果在本機測試會有什麼問題阿????
07/17 22:20, 12F

07/17 22:21, , 13F
有些瀏覽器會擋本機資源
07/17 22:21, 13F

07/17 22:38, , 14F
原來如此。哈!謝謝大家耶,真的多瞭解了一些,希望以
07/17 22:38, 14F

07/17 22:38, , 15F
後仍不吝指教,感謝
07/17 22:38, 15F

07/18 00:02, , 16F
樓上... 這是jQuery支援的方式 你可以看官方doc
07/18 00:02, 16F

07/18 00:03, , 17F
哀 沒看完XDD
07/18 00:03, 17F

07/18 00:03, , 18F
to 原po 建議測試架個local的http server
07/18 00:03, 18F

07/18 00:03, , 19F
這樣比較不會遇到問題
07/18 00:03, 19F

07/18 10:49, , 20F
在本機測試請勿使用Chrome瀏覽器,會看不到。
07/18 10:49, 20F

07/23 12:48, , 21F
Google 頁籤
07/23 12:48, 21F
文章代碼(AID): #1Jny5hVy (Ajax)