动态加载内容而无需重新加载

时间:2012-11-29 21:01:21

标签: jquery html5

我想加载内容而不重新加载整个页面。

此代码有什么问题?

另外,如何在这些页面之间进行转换?

如果我点击主页上的服务,我希望创建一个淡入/淡出效果。

我对jQuery完全不熟悉。

这是我的代码

     <!DOCTYPE HTML>
     <html>
     <head>
     <meta charset="utf-8">
     <title>Untitled Document</title>
     <link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
     <!--[if lt IE 9]>
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
     <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
     <script type="text/javascript">
       function updateContainer( url ){
         dynamicCon = '#content';    
         ObjTag = $( dynamicCon );
         ObjTag.load( url );
       }
       $( document ).ready( function() {
         $( 'a[rel="dynamicLoad"]' ).bind( "click", function( event ) {
           url = $( this ).attr( 'href' );
           alert(url);
           updateContainer( url );
           event.preventDefault();
           event.stopPropagation();
         });
       });
     </script>
     </head>

这是正文内容:

enter image description here

stackoverflow正在解析它。

1 个答案:

答案 0 :(得分:0)

.load()函数在chrome中不起作用..它在firefox / ie中运行正常。