利用jquery.load()实现html框架效果

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>标签的跳转

其余行都是复制来的,稍做修改而成,有没有效率等问题我还不知道,见谅