If you don't know about jQuery yet, let me have the pleasure to introduce you to it. It's a very easy-to-use JavaScript library that offers easy DOM manipulation, effects and a ton more. You can find out more on jQuery at their website: http://www.jquery.com.

Note: you can also use standard JavaScript or Prototype when doing this as well. I just really like jQuery (can you tell?)

Step 1. Get jQuery

In this example, we are going to use the jQuery core library found here.

Clear, Concise, and Entertaining Cover to Cover

JavaScript: The Missing Manual — This book from bestselling author David McFarland teaches you how to use JavaScript in sophisticated ways -- even if you have little or no programming experience. Once you the master the language's structure and terminology, you'll learn how to use advanced JavaScript tools to add useful interactivity to your sites quickly, rather than script everything from scratch.

Step 2. Create your HTML page

I'm going to create a file called myapp.html. I'll put it in the same location that I placed my jQuery library at.

Notice that at the top of the HTML page, we are including three files. The first is a stylesheet that we will use to stylize the tabs and contents. The second is the jQuery library that we downloaded. The third is a small JavaScript file that I included to keep things clean. It's always good practice to separate out your scripts from your HTML pages when possible.

Step 3. Create your CSS file

Let's create the CSS file that's included in the HTML above. We'll call it 'myapp.css'

Lines 1-6 remove the dotted outline that Firefox puts around the clicked tabs.

Lines 7-11 set the width and style properties of the whole container.

Lines 12-17 sets the styles for the tab container. Notice that on line 15, we set a height of 21 pixels. This coincides with the font size set on line 10. If you were to increase or decrease the font size, you will also want to do the same for the height.

Lines 18-20 make it so that all the items in the unordered list (ul tag) appear next to each other instead of on top of each other.

Lines 21-30 sets the tab styles. You can use backgrounds instead of just colors here if desired.

Lines 31-34 sets the style for the active tab. Notice that the top padding is 4 pixels instead of 3. By doing this, we are able to make the bottom of the tab appear white making it look like it's part of the contents below.

Lines 35-39 sets up the style for the contents container. Notice that there is a border set for the right, bottom, and left. This is because our top border is already set on line 14.

Lines 40-42 set the non-active tab contents to be invisible.

Lines 43-45 set the active tab to be visible.

Lines 46-48 are used to clear out any floats that appear above it. (see lines 24-26 in the HTML above)

Step 4. Create your onLoad JavaScript file

As we did with the CSS file, we are going to create a .js file which contains our custom JavaScript code. We'll put it into 'myapp.js'.

Hopefully my notes in the .js file itself explains how it works well enough.

That should do it. Once you're done, your app should look something like this:

You can download my sample code here.

But Wait, There's More!

Sometimes it doesn't make sense to write this stuff from scratch when there are so many other resources out there to use.

Two that I have used in the past are JavaScript Tabifier by Patrick Fitzgerald and Yahoo UI Tabs.

I hope you like this post. If you have any suggestions on future how-to topics you would like me to cover, please email me at cavneb@gmail.com.