How to Create Efficient Jquery Tabs – Full Tutorial and XHTML

One of the biggest challenges to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs and websites. Today we’re going to build a simple tabbed information box in XHTML, then make it function using some jQuery code.

Beginning the XHTML Structure.

First build the structure using HTML lists. The first list is the head of our tabs:

<ul>
<!-- These are the tab headers -->
	<li><a href="#">Fruits</a></li>
	<li><a href="#">Animals</a></li>
	<li><a href="#">People</a></li>
</ul>
<ul>
<!-- This is what is displayed when the first tab is clicked -->
	<li><a href="#">Apple</a></li>
	<li><a href="#">Banana</a></li>
	<li><a href="#">Lemon</a></li>
	<li><a href="#">Orange</a></li>
</ul>
<ul>
<!-- This is what is displayed when the second tab is clicked -->
	<li><a href="#">Dog</a></li>
	<li><a href="#">Cat</a></li>
	<li><a href="#">Shark</a></li>
	<li><a href="#">Parrot</a></li>
</ul>
<ul>
<!-- This is what is displayed when the third tab is clicked -->
	<li><a href="#">Tim Barnes Lee</a></li>
	<li><a href="#">Steve Jobs</a></li>
	<li><a href="#">Richard M. Stallman</a></li>
	<li><a href="#">Bill Gates</a></li>
</ul>

Properly Formatting our Tabs in an XHTML Web Document:

Now we change our tabs adding DIVs and Selectors to XHTML code and giving some CSS styles.

<div id="content">
<h4>Tabs with Jquery</h4>
<div id="tab_container">
<ul class="tab_header">
	<li><a class="active_tab" title="content_1" href="#">Fruits</a></li>
	<li><a class="tab" title="content_2" href="#">Animals</a></li>
	<li><a class="tab" title="content_3" href="#">People</a></li>
</ul>
<div id="tab_content">
<div id="content_1" class="content">
<ul>
	<li><a href="#">Apple</a></li>
	<li><a href="#">Banana</a></li>
	<li><a href="#">Lemon</a></li>
	<li><a href="#">Orange</a></li>
</ul>
</div>
<div id="content_2" class="content">
<ul>
	<li><a href="#">Dog</a></li>
	<li><a href="#">Cat</a></li>
	<li><a href="#">Shark</a></li>
	<li><a href="#">Parrot</a></li>
</ul>
</div>
<div id="content_3" class="content">
<ul>
	<li><a href="#">Tim Barnes Lee</a></li>
	<li><a href="#">Steve Jobs</a></li>
	<li><a href="#">Richard M. Stallman</a></li>
	<li><a href="#">Bill Gates</a></li>
</ul>
</div>
</div>
</div>

Styling the Content with Basic Shape and Colour:

/*Giving page colour and font*/

body{font-family:Arial, Helvetica, sans-serif; background: #001C3E; color:#FFFFFF;}

/*Remove the lists bullets*/

ul,li{list-style:none;}

/*Entire page container, assign a size and center it*/

#content{width:600px; margin:10px auto;}

/*tab_container is the DIV that contains all the tab area, tab_content is the div that contains each of the tabs' content*/

#tab_container{padding:8px 8px; width:300px; background:#005D8C; border:1px solid #E0E0E0;}

#tab_content{padding:5px; background:#FFFFFF; border:1px solid #04667f;}

/*The TAB header*/

ul.tab_header{margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; }

ul.tab_header li{display:inline;}

/*The tab header links are converted to uppercase and give it a padding and a border */

ul.tab_header li a{

color:#097793;

padding:5px 10px 6px 10px;

text-transform:uppercase;

border:1px solid #04667f;

background:#FFFFFF;}

/*On a tab change, we change the bottom border to white and fuse it with the content colour*/

ul.tab_header li a:hover{border:1px solid #CCCCCC;}

ul.tab_header a.active{color:#000000;

border-bottom: 1px solid #ffffff; background:#FFFFFF; }

a.tab{font: bold 15px Arial, Helvetica, sans-serif; text-decoration:none;}

/*Giving some style to content list, you can add styles for other elements that you like to include in the tabs */

.content ul{margin:10px 0px; padding:0 11px;}

.content ul li{ margin-bottom:3px; font-size:15px;}

.content ul li a{color:#3f4c4f;}

.content ul li a:hover{color:#899fa5;}

/*IMPORTANT, we give display none because with JQuery we show the content when it is clicked*/

#content_2, #content_3 { display:none; }

Now, you may think that the tabs look a little bare, but keep in mind that this is just a tutorial on how to use Jquery to create tabbed content. If you really want to make the tabs into something that will compliment your content, be sure to style it accordingly using CSS.

Finishing (The JQuery Code):

Now we use the Show and Hide JQuery methods to activate the content when the user clicks on a tab header. Before that remember include the JQuery library (ex. version 1.2.6 ) on our HTML document.

Note, I just use GoogleAjax’s Javscript Library to serve my Jquery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

Here is the JQuery code that generates the tabs:

<script type="text/javascript">
// <![CDATA[
     // When the Document loads
    $(document).ready(function(){
     // When a tab link is clicked
    $("a.tab").click(function () {
         // Remove old active class
       $(".active").removeClass("active");
          // Give active class to actual tab link
       $(this).addClass("active");
          // Hide the content
          $(".content").hide('slow');
         // Show the content obtaining the title atribute of current link
        var title = $(this).attr("title");
         $("#"+title).show('slow');
     });
 });
// ]]>
</script>
 

Conclusion and Jquery Tabs Demo Link:

In conclusion, this method is probably the most lightweight of all the methods available on the web.. being only a few lines of code (without comments). These Jquery Tabs will function in browsers that have Javascript enabled (I remember seeing a statistic that 98% of them do).

Demo Page: Jquery Tabs Tutorial | BradBlogging.com

Download Link: Download all the code from the  Jquery Tabs Tutorial | BradBlogging.com

Related posts:

1. 16 Jquery Slideshow Applications You CANNOT Miss – Updated!