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

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

 

你可能感兴趣的:(jquery)