Can anyone tell me the code to display the other page content in index page without refresh when click on anchor tag. All the pages are in HTML. Second page content can be shown with slide.

I want the code for HTML files not for PHP.

page1.html

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script>
$(function(){
    $("#menu > a").click(function(e){
        //e.preventDefault(); 
        /*  
        if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
        if commented, html5 nonsupported browers will reload the page to the specified link. 
        */

        //get the link location that was clicked
        pageurl = $(this).attr("href");

        //to get the ajax content and display in div with id 'content'
        $.ajax({url:pageurl,success: function(data){
            $("#content").html(data);
        }});

        //to change the browser URL to 'pageurl'
        if(pageurl!=window.location){
            window.history.pushState({path:pageurl},"",pageurl);    
        }
        return false;  
    });
});

/* the below code is to override back button to get the ajax content without reload*/
$(window).bind("popstate", function() {
    $.ajax({url:location.pathname,success: function(data){
        $("#content").html(data);
    }});
});
</script>
</head>

<body>

<div id="menu">
    <a href="test2.html" id="ab">menu1</a> 
</div>

<div id="content"></div>
</body>
</html>

```

Secondpage.html

```
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Untitled Document</title>
    </head>
    <body>
      <div id="content">Second page</div>
     </body>
</html>

```