作者chengninghu (GOGOG)
看板Ajax
標題[問題] 新手請教 jQuery .load()的問題
時間Thu Jul 17 20:28:25 2014
各位先進大家好
想請教一個問題
假設我有個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://webptt.com/m.aspx?n=bbs/Ajax/M.1405600107.A.7FC.html
1F：推 s25g5d4:load 不是這樣用的 他只能指定 load 進來的檔案 url 07/17 21:38
2F：→ s25g5d4:後面的 #content 是無效的 07/17 21:39
3F：→ s25g5d4:你可以先把 .html 當純文字讀進來存到字串 再把 #content 07/17 21:39
4F：→ s25g5d4:抓出來寫進去目前網頁 07/17 21:40
5F：→ s25g5d4:然後上一頁 回到之前的內容 關鍵字是 pushtstate 07/17 21:40
7F：推 s25g5d4:oh, wow 07/17 21:59
8F：→ s25g5d4:那...原 PO 是在本機測試嗎? 有架 http 伺服器嗎? 07/17 22:01
9F：→ chengninghu:我是在本機測試!!!!!ㄎㄎ 07/17 22:18
10F：→ chengninghu:謝謝前兩位前輩協助!!!pushstate很神奇 07/17 22:19
11F：→ chengninghu:雖然還沒有很懂，但我努力會去瞭解的..再次感謝囉!!! 07/17 22:19
12F：→ chengninghu:請問s25g5d4，如果在本機測試會有什麼問題阿???? 07/17 22:20
13F：推 s25g5d4:有些瀏覽器會擋本機資源 07/17 22:21
14F：→ chengninghu:原來如此。哈！謝謝大家耶，真的多瞭解了一些，希望以 07/17 22:38
15F：→ chengninghu:後仍不吝指教，感謝 07/17 22:38
16F：→ danny8376:樓上... 這是jQuery支援的方式 你可以看官方doc 07/18 00:02
17F：→ danny8376:哀 沒看完XDD 07/18 00:03
18F：→ danny8376:to 原po 建議測試架個local的http server 07/18 00:03
19F：→ danny8376:這樣比較不會遇到問題 07/18 00:03
20F：→ leochen0818:在本機測試請勿使用Chrome瀏覽器，會看不到。 07/18 10:49
21F：→ mygirl30229:Google 頁籤 07/23 12:48