Allow users to click on a button to display new content on a single page.

Check out an example of this here

Below is the css and html on the the main page (call it whatever you want). This is the page that contains the buttons that the user will click on and the content dynamically changes without a page refresh using the ajax load() function.

<!DOCTYPE html>
<head>
<title>Ajax page reload</title>

<style type="text/css">
html,
body {
   margin:0;
   padding:0;
   height:100%;
   text-align:center;
}

#container {
   min-height:100%;
   position:relative;
}

#header {
	 background:#999;	
     padding:20px;
     border-bottom: 5px solid #333;
	 
     box-shadow:        0 15px 15px #000000;
	-moz-box-shadow:    0 15px 15px #000000;
	-webkit-box-shadow: 0 15px 15px #000000;
}
#content {
	width:940px;
	margin: 50px auto 0 auto;
    padding-bottom:80px;   /* Height of the footer */
}

#footer {
   position:absolute;  
   bottom:0;
   width:100%;
   height:80px;   /* Height of the footer */
   background:#666; 
   border-top: 5px solid #333;
   
  -webkit-box-shadow: 0 -15px 15px  #000000;
  -moz-box-shadow:    0 -15px 15px  #000000;
   box-shadow:        0 -15px 15px  #000000;
  

}

input {
	width:150px;
	height:35px;	
}

#footer p {
	 color:#ffffff;
     font-size:1.3em;
	 padding:5px;	
}

/* below we can preload images into cache by making them load out of view */
#image_preload_1
{
	background:url(../images/home_slideshow1.jpg);
	background-repeat:no-repeat;
	left:-9999;
}
#image_preload_2
{
	background:url(../images/home_slideshow2.jpg);
	background-repeat:no-repeat;
	left:-9999;	
}
#image_preload_3
{
	background:url(../images/home_slideshow3.jpg);
	background-repeat:no-repeat;
	left:-9999;	
}

</style>

</head>

<body>

<!-- Preload images while visitor is viewing the home page -->
<div id="image_preload_3"></div>
<div id="image_preload_2"></div>
<div id="image_preload_1"></div>


    <!-- container that holds the header, content, and footer -->
        <div id="container">
    
            <!-- The header -->
            <div id="header">
                <input type="submit" onClick="load('content', 'page1.php');" value="Home"/>
                <input type="submit" onClick="load('content', 'page2.php');" value="Ocean Sunrise"/>
                <input type="submit" onClick="load('content', 'page3.php');" value="Ocean Sunrise 2"/>
                <input type="submit" onClick="load('content', 'page4.php');" value="Eroded Beach"/>		
            </div><!-- End header-->
        
        
       
            <!-- The body content of each page. NOTE: This will change dynamically with the ajax in our javascript below -->
            <div id="content" >
            	<h1>Home</h1><!--  The content below is the same as in page1.php but you could put whatever you want here
                				   as it will change dynamically                                                         -->
                <p>
                    Welcome to my gallery. Click on the navigation above to view an image of your choice. 
                    <br />
                    <br />
                    All new pages will be loaded onto this index page without refreshing the page.
                </p>
            </div>
     
        
            <!-- The footer -->
            <div id="footer">
                <p>No Copyright - 2012</p>
            </div>
    
    </div><!-- End Container -->

<!-- ************** add the javascript here ********************* -->


</body>
</html>

Below is the javascript to add before the end body tag on the page containing the above html(5).

<script>
function load(thediv, thefile) /* 2 parameters passed into here: the id of the div container and the name of the page to go to */
{	
	if (window.XMLHttpRequest)
	{
		xmlhttp = new XMLHttpRequest();	
	}
	else
	{
		xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');	
	}
	
	xmlhttp.onreadystatechange = function()
	{
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
		{
			document.getElementById( thediv ).innerHTML = xmlhttp.responseText;	
		}
	}	

	xmlhttp.open('GET', thefile, true);
	xmlhttp.send();
		
}
</script>

Below are the contents of each page that gets loaded into the main page. Notice that you do not need the full html scaffold since it is getting loaded into a page that contains it already. You could replace the images with whatever content you wanted to, also. These pages are located in the same directory as the above html page.

Page 1 (Home link)

Home

Welcome to my gallery. Click on the navigation above to view an image of your choice.

All new pages will be loaded onto this index page without refreshing the page.

Page 2 (Ocean Sunrise link)

This is a beautiful sunrise from the Outer Banks of North Carolina.

Page 3 (Ocean Sunrise 2 link)

This is another awesome sunrise from the always relaxing Outer Banks.

Page 4 (Eroded Beach link)

This is a cool pic taken in the morning at Pea Island, North Carolina.
- About 10 miles or so south of Nagshead, NC.