<html>
<head>
<style>
ul.tab_ajax {height:5px;; margin:0; padding:0;}
ul.tab_ajax li {float:left; margin:0; padding:0; list-style:none;}
ul.tab_ajax a {padding:5px 10px; border:1px solid #999; margin-right:2px; text-decoration:none; background:#ccc; color:#FFF; text-shadow:1px 1px 2px #000;}
ul.tab_ajax a.current {color:#333; text-shadow:none; background:#F5F5F5; border-bottom:1px solid #F5F5F5; cursor:default;}
.tab_content {border:1px solid #999; width:640px; min-height:300px; background:#F5F5F5; padding:5px;}
.tab_content div {color:#333; font-size:11px;}
</style>
<!-- Panggil Library jQuery dan jQuery tools Library terlebih dahulu-->
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript">
$(function(){
//menggunakan ajax start function untuk memanggil elemen id loading dan ketika ajax sudah terpanggil elemen id loading disembunyikan
$('#loading').ajaxStart(function(){
$(this).fadeIn();
}).ajaxStop(function(){
$(this).fadeOut();
});
//tabs menggunakan ajax history
//di tabs kita, effect nya ditambahkan ajax dan history bernilai boolean
$("ul.tab_ajax").tabs("div.tab_content > div", {effect: 'ajax', history: 'true'});
});
</script>
<title>Ajax tabs + History</title>
</head>
<body>
<!-- style pada loading di NONE -->
<h5 id="loading" align="center" style="display:none;">Loading...</h5>
<ul class="tab_ajax">
<li><a href="content.php?q=1">Tutorial terbaru</a></li>
<li><a href="content.php?q=2">Tutorial terpopuler</a></li>
<li><a href="content.php?q=3">Daftar demo file</a></li>
</ul>
<br class="all" />
<div class="tab_content"><div style="display:block;"><!-- content akan diletakan disini--></div></div>
</body>
</html>
content.php:
<?php
$q = $_GET['q'];
if($q==1){ echo 'Halaman pertama';}
elseif($q==2){echo 'Halaman kedua';}
elseif($q==3){echo 'Halaman ketiga';}
else{'Halaman yang anda cari tidak ditemukan';}
?>
RewriteRule ^!/populer$ content.php?q=2[L]
that's it. Oh yeah why we added only! It's just not the # as well. Since ajax tabs are automatically fill in each link if it is not changed by htaccess we link to index.php / # content.php? Q = 1 url address so it looks messy (in my opinion anyway). To get the current ajax facebook format is still as above. if twitter is more orderly
and if it is changed in its htaccess file. We also change its link to be
<li><a href="!/populer">Tutorial terpopuler</a></li>
