Tabbed navigation using jQuery

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.