Tabbed navigation using jQuery

. Sunday, July 6, 2008
  • Agregar a Technorati
  • Agregar a
  • Agregar a DiggIt!
  • Agregar a Yahoo!
  • Agregar a Google
  • Agregar a Meneame
  • Agregar a Furl
  • Agregar a Reddit
  • Agregar a Magnolia
  • Agregar a Blinklist
  • Agregar a Blogmarks

Someone asked me to show how I created the tabbed navigation thing in my blog (right column). Just to let you know, I am just using an existing template for my blog, but wish to design one myself in future.

In this tutorial, I am going to show you how to create a simple tabbed navigation using jQuery (as you know, its a javascript library).

You will require two javascript files for doing this.
jQuery library - Download here
jQuery UI (user interface) tabs - Download here

HTML code
Suppose we have three div elements in our webpage (box-1, box-2, and box-3), and we want them in tabs.

<div id="container-1">
<li><a href="#box-1"><span>One</span></a></li>
<li><a href="#box-2"><span>Two</span></a></li>
<li><a href="#box-3"><span>Three</span></a></li>

<br />

<div id="box-1">
Box 1 content here

<div id="box-2">
Box 2 here...

<div id="box-3">
Do you really need Box #3?

CSS - some floats for ul and li
.ui-tabs-hide {
: none;

: 0px;
: 0px;

ul li
: left;
: 10px;
: none;

: both;

: bold;
: none;

Add this code at the end of your webpage (right before the closing body tag)
<script type="text/javascript">
'load', function() {
'#container-1 > ul').tabs();

I assume you havent forgotten to add the two javascript files I mentioned earlier inside the HEAD tag. Have fun.


Ryan said...

great tut again. i needed a tabbed nav system for my web app badly. jquery rocks! :D

Anonymous said...

You didn't show how to switch the background images.

Also, I would recommend that people download the latest versions of jquery and the ui scripts.

td said...

I ran across your site by accident? I tried the methods you described to create the similar tabbed navigation. I downloaded both java's put them in between the head of the css. No sucess in making it work? I was able to view your source code and use a javacript you had embedded in yours. That one seemed to work, go figure? What could I be doing wrong?

Webagentur said...

Thank you, this little tutorial has me very helped.