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

-1

这段代码有什么问题？

另外，如何在这些页面之间进行转换？

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

我完全不熟悉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