Download
//dbcon.php
<?php
$link = mysql_connect('localhost', 'root', 'ednalan');
@mysql_select_db('dbname',$link);
?>
//index.php
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#first-tab").addClass('button2');
});
function navigate_tabs(page, tab)
{
showLoader();
/// load new page
$.post("record.php?page="+page,{
}, function(response){
hideLoader();
$('#place').html(unescape(response));
});
/// hover on navigation
$("#first-tab").removeClass('button2');
$("#second-tab").removeClass('button2');
$("#third-tab").removeClass('button2');
$("#fourth-tab").removeClass('button2');
$("#"+tab).addClass('button2');
}
//show loading bar
function showLoader(){
$('.search-background').fadeIn(200);
}
//hide loading bar
function hideLoader(){
$('.search-background').fadeOut(200);
};
</script>
<style>
#place{ background:#FFFFFF;height:370px; border:solid #000000 px;width:570px; padding:14px}
#wrap{
text-align:left;
overflow:hidden;
width:650px;
height:500px;
}
.search-background {
display: none;
font-size: 13px;
background:#999999;
color:#FFFFFF;
font-weight: bold;
height:250px;
width:600px;
position: absolute;
padding-top:150px;
text-align: center;
opacity:0.5;filter: alpha(opacity=50) ;
text-decoration: none;
}
a.button{ padding:5px 15px 5px 15px;
text-decoration: none;
display: inline-block;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-bottom: 1px solid rgba(0,0,0,0.25);
font-family: "Lucida Grande",Lucida,Verdana,sans-serif;
outline:none;
position:relative;
font-size: 22px;
margin:10px;
white-space:nowrap;}
</style>
<div id="wrap" >
<a href="javascript:navigate_tabs('home','first-tab');" class="button" id="first-tab">Home</a>
<a href="javascript:navigate_tabs('services','second-tab');" class="button" id="second-tab">Services</a>
<a href="javascript:navigate_tabs('about','fourth-tab');" class="button" id="fourth-tab">About</a>
<a href="javascript:navigate_tabs('contact','third-tab');" class="button" id="third-tab">Contact</a>
<br clear="all" />
<div id="body" align="center">
<div class="search-background">
<label><img src="loading.gif" alt="" /></label>
</div>
<div id="place">
</div>
</div>
</div>
<?php
//records.php
include("dbcon.php");
$userip = $_SERVER['REMOTE_ADDR'];
if(@$_REQUEST['page'])
{
$page = mysql_escape_string($_REQUEST['page']);
$page = strip_tags($page);
$result = mysql_query("select * from ajax_tabs where page='$page'");
$num = mysql_num_rows($result);
echo $page;
}
else
{
$result = mysql_query("select * from ajax_tabs where page='$page'");
$num = mysql_num_rows($result);
$row=mysql_fetch_array($result);
echo $row['text'];
}
?>
