作者a26732300 (Hades)
看板Ajax
標題[問題] ajax load() 函式沒有作用
時間Thu Oct 31 05:42:31 2013
各位大大好
小弟我下載了一個jquery的網頁模板
而這個模板他把所有的功能、內容都寫在同一個html裡面
不過我怕最後會很難維護，所以想要把每個tab menu功能分開來在不同頁面去寫
想說可以用ajax裡的load()函式做處理
------------------------------------------------------
tab menu 程式如下
<div id="p" class="test">
<a href="#" id="a" class="page1">首頁 </a>
<a href="#" id="b" class="page2">功能1</a>
<a href="#" id="c" class="page3">功能2</a>
<a href="#" id="d" class="page4">功能3</a>
<a href="#" id="e" class="page5">功能4</a>
</div>
------------------------------------------------------
內文程式
<div id="f1" class="content">
功能1
</div>
<div id="f2" class="content">
功能2
</div>
..以此類推
------------------------------------------------------
ajax load()的寫法
<script>
$('#a').click(function () { $('#f1').load('a.html'); });
$('#b').click(function () { $('#f2').load('b.html'); });
$('#c').click(function () { $('#f3').load('c.html'); });
...以此類推
</script>
-------------------------------------------------------
但是這樣卻起不了甚麼功用...，不知道是哪邊寫錯了
怕這樣描述還是不清楚，所以整理了一下簡易的程式碼附上來
http://goo.gl/AUKpCb
感謝幫忙!
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 140.118.109.17
1F：推 qwer820404:先確認你的click事件有沒有正確綁上去並觸發 10/31 10:40
2F：→ osk2:我用你網頁跑一次沒問題阿，動作都正常，清快取再試一次吧 10/31 12:47
3F：→ mepowerlmay: $("#a").on('click',function(){ 10/31 15:01
4F：→ mepowerlmay:$("#f1").load('a.html');}); 10/31 15:01
5F：→ mepowerlmay: 兩行合再一起 試試看 10/31 15:02
6F：推 mepowerlmay:更正 放到HTTP server IIS或Apache運行看看 10/31 15:29
7F：→ a26732300:這方法剛剛試過好像一樣沒變化，click事件是有觸發 11/01 17:58
8F：→ a26732300:不知道是哪邊出了狀況說... 11/01 17:59
9F：推 mepowerlmay:請問您有把檔案放到http server了嗎? 11/01 20:33
10F：→ osk2:的確滿有可能是沒放進HTTP SERVER執行 11/01 21:24
11F：→ kerash:跑 js 需要放 server 嗎.. 我直接開可以跑，正常。 11/01 22:33
12F：→ mmis1000:需要存取其他檔案的網頁，的確不能在本機執行 11/01 22:41
13F：→ mmis1000:js在本機執行的權限，也只有ie能開 11/01 22:42
14F：→ a26732300:我把它放在IIS上面，不過a、b、c..html內容似乎是沒load 11/02 01:04
15F：→ a26732300:進去 11/02 01:05
17F：→ a26732300:用$("#a").on('click',function(){$("#f1").load('a.htm 11/02 01:09
18F：→ a26732300:l');});這個方法，不過他似乎沒有載入a、b、c..html的內 11/02 01:10
19F：→ a26732300:容 11/02 01:11
20F：→ a26732300:那個藍色的字 "首頁、功能1、2、3.."只是原本標題，並非 11/02 01:13
21F：→ a26732300:是其他HTML裡的內容喔! 另外我用IE開好像也不行= = 11/02 01:14
22F：→ a26732300:不過很怪的是，滑鼠移到tab menu，是有顯示a、b、c、... 11/02 01:17
23F：→ a26732300:html的網址，但內容卻沒有載進去那個div框架裡 11/02 01:18
24F：推 mepowerlmay:年輕人都很晚睡 11/02 01:21
25F：→ mepowerlmay:你寫的方式怪怪 11/02 01:22
26F：→ mepowerlmay:應該是1個div可以load不同的html檔 11/02 01:22
27F：推 mepowerlmay:用一下jquery 最新的版本或掛google jquery CDN 11/02 01:26
28F：→ mepowerlmay:設計的不錯 要是我有你的一 半就好了... 11/02 01:27
29F：→ mepowerlmay:前端跟後端的差異........ 11/02 01:27
31F：推 mepowerlmay:on的 jquery event在1.2.2還沒出生 11/02 01:30
32F：→ mepowerlmay:找一下FIRE FOX javascipt的console地方你就知道了 11/02 01:31
33F：→ a26732300:喔! 是喔= = 11/02 01:31
34F：→ mepowerlmay:我只會chrome 11/02 01:32
35F：→ mepowerlmay:可以問一下您css 怎麼學的嗎? 11/02 01:32
36F：→ a26732300:原本用的$('#a').click(function (){}這個方式也太新嗎? 11/02 01:33
37F：→ a26732300:沒，我是套別人做好的模板要來寫後端ASP.NET的程式 11/02 01:35
38F：→ a26732300:只是他給我寫再一起，怕之後不好維護，希望拆開來做... 11/02 01:35
39F：推 mepowerlmay:我剛剛試過我自己的sample 是OK的 11/02 01:38
40F：→ mepowerlmay:原來是同行...學生嗎? 11/02 01:38
41F：→ mepowerlmay:總之你就用最新版的Jquery 試試看吧 11/02 01:40
42F：→ a26732300:是啊，還是學生 11/02 01:40
43F：→ mepowerlmay:畢竟你不可能找 2007 2008的JQUERY資料來用吧 11/02 01:40
44F：→ a26732300:好的，我載最新的試試，感謝你! 11/02 01:40
45F：→ a26732300:恩，也對.. 11/02 01:41
46F：→ mepowerlmay:如果jq不熟你去估狗 30 Days to Learn jQuery 11/02 01:41
47F：→ mepowerlmay:這有免費的教學不過是英文 11/02 01:41
48F：→ mepowerlmay:我非本科系 在做pg卻同時包pm sa sd... 11/02 01:42
49F：→ mepowerlmay:主管看到畫面一直念醜...我還要兼美工 11/02 01:42
50F：推 mepowerlmay:JQ一個click事件可以用.bind/.on/.delegate寫出來 11/02 01:45
51F：→ a26732300:可以問一下你js的版本是哪一個呢，我用2.0.3好像一樣 11/02 01:57
52F：→ a26732300:我本來功能寫好了..老闆嫌太醜= =，要我弄一個好看的模 11/02 01:59
53F：→ a26732300:版，然後從頭改在上面... 11/02 01:59
54F：→ a26732300:非本科系包sasd...真的還蠻厲害的 <(￣一￣ ) 11/02 02:03
55F：推 mepowerlmay:我做好了... 11/02 02:10
57F：→ mepowerlmay:...點錯點到噓 11/02 02:15
58F：→ a26732300:剛剛測試過這個，是可以跑的，我明天用這方法套進去看看 11/02 02:31
59F：→ a26732300:感謝me大這麼晚還要熬夜的幫忙，謝謝你啦! 先晚安啦! 11/02 02:32
60F：→ danny8376:jQuery別用2.X.X 除非IE6-8沒打算支援 不然用1.X.X 11/02 11:34
61F：→ a26732300:恩恩，感謝，目前用1.10.2 11/07 02:11