I have always liked using tabs as a means for navigating a website. In my opinion tabs are a great way to separate content because they are a somewhat natural representation of a real-world artifact that many users are used to. And if a navigation item is familiar to users, then it helps increase usability, an often-overlooked goal of web development.

To implement tabs in our projects I have always used the “sliding doors of CSS” technique (as described in the “Sliding Doors of CSS” written by Douglas Bowman). I particularly like this technique because it pre-loads all the necessary images needed for the tabs and because it provides an easy way to design customized tabs without the need for a ton of markup to display them on the screen.

But lately, for the right project I have taken to using jQuery’s implementation of the tabbed interface. I like jQuery tab framework because it’s a quick way to code tabs for web applications and because its very customizable. One implementation has jQuery tabs using AJAX to call up the appropriate page automatically without the need for a controller. Using AJAX isn’t always the best practice, but for some projects, it could be the right way to go.

That said, I wanted a way to use the sliding door tab technique mentioned above using jQuery’s tab framework. Here is a link to an example to see how I did it.

If you want to use it for your own projects, the source files are shown in the demo on the “notes” page.