Tabbed navigation using jQuery

. Sunday, July 6, 2008
  • Agregar a Technorati
  • Agregar a Del.icio.us
  • 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).

Requirements
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">
<ul>
<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>
</ul>

<br />

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

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

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


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

ul
{
margin
: 0px;
padding
: 0px;
}

ul li
{
float
: left;
padding-right
: 10px;
list-style
: none;
}

br
{
clear
: both;
}

a
{
font-weight
: bold;
text-decoration
: none;
}


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

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

4 comments:

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.