 it seems like more and more these days javascript tabbed interfaces are being used there are plenty of scripts out there but i think it is important to be able to do things yourself a lot of javascript plugins that you will find online will give you way more than you really need and you may understand how to use it but you will not really understand what it is really doing first i thought i would walk through creating a tabbed navigation script with jquery and then modifying it so that it works without javascript if you want to skip ahead take a look at the sample jquery tabbed interface the markup im going to set this up using classes so that it is possible to use this multiple times on a page there are two different pieces to the markup the navigation and the actual content for the tabs the navigation ul class= tabnav li class= current a href= tab 1 a li lia href= tab 2 a li lia href= tab 3 a li lia href= tab 4 a li lia href= tab 5 a li ul pretty straightforward just an un ordered list the javascript will accommodate any number of tabs notice that the first tab has a class of current this will be the class to style to show the active tab the tab content div class= tabcontainer div class= tab current hellip content for tab 1hellip div div class= tab hellip content for tab 2hellip div div class= tab hellip content for tab 3hellip div div class= tab hellip content for tab 4hellip div div class= tab hellip content for tab 5hellip div div again pretty straightforward a container and a div for each of the tabs content a couple of things to note the first tab content also has a class of current and the tabs content divs need to appear in the same order as the navigation some basic css im not going to explain how i completely style my example but i will highlight the necessary styles for the tabs to work to highlight the active tab this is what you want to style ul tabnav li current a hellip in order to hide all of the tabs contents except for the active tab these are the styles that are necessary div tabcontainer div tab display none div tabcontainer div current display block the javascript ok this is definitely the meat of the post since i wanted this to be as generic and simple as possible i made heavy use of the parent and children selectors so to start we want to add onclick events to the tabs $ document ready function $ ul tabnav a click function hellip return false when each tab is clicked we want to see which tab was clicked on so that we can show the appropriate content so we count the previous number of siblings of the parent the list item and store it in the curchildindex variable $ document ready function $ ul tabnav a click function strongvar curchildindex = $ this parent prevall length 1 strong hellip return false next we want to remove the class of current from the currently selected tab and add the class of current to the tab we just clicked $ document ready function $ ul tabnav a click function var curchildindex = $ this parent prevall length 1 strong$ this parent parent children current removeclass current $ this parent addclass current strong hellip return false the final step is to hide the tab content that is currently showing and to show the tab content that matches the tab that was just clicked on this is where we will make use of the curchildindex variable and the nth child selector $ document ready function $ ul tabnav a click function var curchildindex = $ this parent prevall length 1 $ this parent parent children current removeclass current $ this parent addclass current strong$ this parent parent next tabcontainer children current slideup fast function $ this removeclass current $ this parent children div nth child curchildindex slidedown normal function $ this addclass current strong return false the previous snippet of the code is traversing from the clicked tab this to the current content that has a class of current sliding that up and removing the class of current once that is complete we are selecting the tab content that matches the tab clicked sliding it down and adding the class of current take a look at the sample jquery tabbed interface to see it in action making it work for non javascript users now that works great but what about people who dont have javascript enabled sure its a very small number but we still want to account for those people most other javascript tab scripts use javascript to hide the non active tab content sections or to write in the tabbed navigation but then you get that flash of changing content my idea is to use css to hide the non active tab content which i discussed earlier and pass a parameter into the url to select which tab to show the code below is the new code for the tab navigation ul class= tabnav li php if isset $ get tab echo class= current a href= tab 1 a li li php if isset $ get tab $ get tab == 2 echo class= current a href= tab=2 tab 2 a li li php if isset $ get tab $ get tab == 3 echo class= current a href= tab=3 tab 3 a li li php if isset $ get tab $ get tab == 4 echo class= current a href= tab=4 tab 4 a li li php if isset $ get tab $ get tab == 5 echo class= current a href= tab=5 tab 5 a li ul basically i am checking to see if the variable tab is set in the url and determining the value of it i also use the same logic for the tab content this is the example page with tab 3 displaying so basically if the user does not have javascript it would reload the entire page and display the correct tab conclusion this was just a simple example of jquery and the possibilities are endless instead of being so quick to use a plugin or someones code try to do it yourself you will become a much better programmer because of it even if you arent doing things as efficiently as possible you will learn something new every time 