Simple and easy jQuery tabs with AJAX and PHP

In this article, I will be showing you how to create jQuery AJAX tabs in a very simple and easy way.

View Demo || Download Code

Here, tabs.php contains the php code which contains data to be displayed.

<?php
	$p = $_GET['id'];	
	
	switch($p) {
		
		case "1":
		echo '<h2>Google</h2>Content goes here !<br style="clear:both;" />';
		break;			  
		
		case "2":
		echo 'Yahoo content ?<br style="clear:both;" />';
		break;
		
		case "3": 
		echo 'My hotmail content goes here...<br style="clear:both;" />';
		break;
		
		case "4": default:
		echo 'Twitter status update <br style="clear:both;" />';
		break;
	}
?>

The html code containing menu and content is as under. Here, each link has a different css id and a different url (tabs.php is called with different id value). The div with the id ‘tabcontent’ is where the content is displayed. Initially, the default text ‘Simple AJAX Tabs’ is displayed. The div with the id ‘preloader’ contains loading image.

<div class="navcontainer">
	<ul>
		<li><a id="tab1" href="tabs.php?id=1">Google</a></li>
		<li><a id="tab2" href="tabs.php?id=2">Yahoo</a></li>
		<li><a id="tab3" href="tabs.php?id=3">Hotmail</a></li>
		<li><a id="tab4" href="tabs.php?id=4">Twitter</a></li>
	</ul>
</div>

<div id="preloader">
	<img src="loading.gif" align="absmiddle"> Loading...
</div>

<div id="tabcontent">
	Simple AJAX Tabs
</div>

Initially, when the page is loaded, the preloader image is made hidden by hiding the preloader div.
Then, the tab link click is traced by jQuery(“[id^=tab]”). This matches every click in the tab.
[attribute^=value] = Matches elements that have the specified attribute and it starts with a certain value.

Then the current clicked tab id is fetched by $(this).attr(“id”). And then the current clicked tab url is fetched by jQuery(“#”+tabId).attr(“href”).

CSS class ‘current’ is used to hightlight the current tab. So at first, all ‘current’ class is removed if it exists in any tab link. Then ‘current’ class is added to the current tab link.

Finally, loadTabContent function is called.

jQuery(document).ready(function(){
	$("#preloader").hide();
	jQuery("[id^=tab]").click(function(){

		// get tab id and tab url
		tabId = $(this).attr("id");
		tabUrl = jQuery("#"+tabId).attr("href");

		jQuery("[id^=tab]").removeClass("current");
		jQuery("#"+tabId).addClass("current");

		// load tab content
		loadTabContent(tabUrl);
		return false;
	});
});

jQuery.ajax() returns the XMLHttpRequest instance that it creates. jQuery.ajax() gives you the option to specify a dataType parameter, which gives jQuery a hint as to what to expect back from the server. The ‘url’ parameter of jQuery.ajax() function is the url to request. The other parameter is ‘success’ function. This function is called if the request succeeds. This function’s parameter is the data returned from the server.

In this success function, I have appended the data returned from server into the tabcontent div. At the beginning of loadTabContent function, preloader is shown. The preloaded is again made hidden after the data is fetched from server and displayed in tabcontent div.

function loadTabContent(tabUrl){
	$("#preloader").show();
	jQuery.ajax({
		url: tabUrl,
		cache: false,
		success: function(message) {
			jQuery("#tabcontent").empty().append(message);
			$("#preloader").hide();
		}
	});
}

View Demo || Download Code

PS: This article is a modified version of jQuery Tabs example present on Jetlogs.org.

Update (March 18, 2015): jetlogs.org seems to be down.

Thanks.