利用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>标签的跳转
其余行都是复制来的,稍做修改而成,有没有效率等问题我还不知道,见谅
