Simple Tabs and Ajax with Jquery
Here is a pretty basic Web page - some tabs and a content area. When the user clicks a tab, some content loads into the content area. This works in two ways - regular old-fashioned links and new-fangled ajax powered by jquery. If your site visitor has javascript disabled, the links load a new page. If javascript is enables then the ajax kicks in.
Ajax stands for Asynchronous Javascript. What this means is that part of a web page can be changed without reloading the whole page. Although, that may not seem like a big deal, it is one of the foundation technologies for "Web 2.0."
You can check out the demo here.
Complete source code: HTML, CSS, and JavaScript.
There are basically 2 parts to the HTML code, an unordered list of links (which are styled into tabs) and the content area.
Here it is:
<ul id="tabs">
<li id="part1"><a href="index.html" id="part1">Part 1</a></li>
<li id="part2"><a href="part2.html" id="part2">Part 2</a></li>
<li id="part3" class="active">
<a href="part3.html" id="part1" class="active">Part 3</a></li>
<li id="part4"><a href="part4.html" id="part4">Part 4</a></li>
<li id="part5"><a href="part5.html" id="part5">Part 5</a></li>
</ul>
<div id="loadarea">
<div id="content">
<!-- CONTENT GOES HERE -->
</div>
</div>
Note that in the <head>of our document we load our stylesheet, style.css, the current version of jQuery, and our javascript, script.js,. (You can downlaod the latest stable version of jQuery and find anything you want to know about jQuery at jquery.com.)
In our CSS, we float the <li>s and style the colors and background colors for the tabs in their normal, hover, and active states.
Each tab consists of the following HTML:
<li id="part2"><a href="part2.html" id="part2">Part 2</a></li>
To both the link (<a>) and the list item(<li>), I have added a unique id. This gives the jquery a way to work on the page.
JQuery can manipulate and apply actions to CSS selectors. On this page, it detects clicks on the tabs and loads the appropriate content. Here is the code, from the file "script.js", which calls on the jQuery library.
$(document).ready(function() { // do stuff when DOM is ready
$("ul#tabs li a").css("text-decoration","none");
$("ul#tabs li, ul#tabs li a").click(function(){
var whichtab = $(this).attr('id');
var theurl = whichtab + ".html #content";
var thetab = "li#" + whichtab;
$("#loadarea").load(theurl);
$("ul#tabs li").removeClass("active");
$(thetab).addClass("active");
return false;
})
});
The whole thing starts off with the standard document ready function that is used to start virtually all blocks of jQuery code. It's purpose is to wait for the DOM to load before executing any code. The second line of code is then executed. It applies the css "text-decoration: none" to all the <a>s that are within a <li> in the unordered list with the id of "tabs". (The "#" denotes an id, while a "." indicates a class, just like in CSS.) This could be done with the stylesheet, but doing it with the jquery give a visible indication that javascript is enabled (or not). What I'm thinking is that I would prefer the links to be underlined in cases where javascript is disabled, and not underlined when javascript is turned on. So I remove the underlining with jQuery.
The rest of the code is the click function. It is stored but not executed when the page is loaded. It executes when a tab is clicked.
To break it down word for word:
- The $ signifies that it is jQuery code which will call upon the jQuery library.
- Next comes the CSS selector which specifies that when a tab is clicked (actually when the <li> or <a> within the tab is clicked), the function executes.
- In the next few lines, we put some data into variables.
- To the variable whichtab, we assign the id attribute of whatever was clicked (this).
- So if the second tab was clicked, whichtab = "part2", theurl = "part2.html #content", and thetab = "li#part2".
- Then, the <div id="content"> from the document part2.html, gets loaded into the <div id="loadarea">.
- Finally, we remove the class "active" from all the tabs, and then add the class "active" to the tab that was clicked.
- The "return false" line prevents the browser from following the link if the <a> tag is what was clicked.
I think this is an awesome display of jQuery's power. You'll notice that it turns the <li>s themselves into clickable objects. This may be its most impressive feature, but it is also it's downfall. As i mentioned earlier, jQuery will not work for anyone who has javascript disabled in their browser (and importantly, this includes search engines.) That is why we also use <a> tags as well.
