2013年3月13日 15:26:57
效果:點擊一側的連接,根據連接得到的結果,改變另一側的內容
提示:這里只是主要代碼,至於相關的css我沒有添加,以免影響代碼閱讀
適合:初學jquery的同學(因為我是今天上午才接觸jquery,之前有一點js基礎)
貼代碼:
1 <body> 2 <a class="hello" href="http://www.cnblogs.com/iLoveMyD/archive/2013/03/13/2957749.html#1">點我試試</a><br> 3 <a class="hello" href="http://www.cnblogs.com/iLoveMyD/archive/2013/03/13/2957749.html#2">點我試試</a><br> 4 <a class="hello" href="http://www.cnblogs.com/iLoveMyD/archive/2013/03/13/2957749.html#3">點我試試</a><br> 5 <a class="hello" href="http://www.cnblogs.com/iLoveMyD/archive/2013/03/13/2957749.html#4">點我試試</a><br> 6 <a class="hello" href="http://www.cnblogs.com/iLoveMyD/archive/2013/03/13/2957749.html#5">點我試試</a><br> 7 <hr> 8 <div id="world"> 9 hello 10 </div> 11 <script type="text/javascript"> 12 $(document).ready( 13 function(){ 14 $(".hello").click( 15 function(){ 16 $("#world").load(this.href); 17 return false; 18 }); 19 }); 20 </script> 21 </body>
html,head等標簽自己加上去就行了,當然也別忘記引入jquery.js
解釋:
第14行,因為有多個超鏈接要響應ajax事件,所以用calss做選擇器
第16行,獲得點擊的那個連接的URL,作為ajax的參數
第17行,阻止<a>標簽的跳轉
其余行都是復制來的,稍做修改而成,有沒有效率等問題我還不知道,見諒