This tutorial looks into creating a really simple tabbed interface using just plain HTML and CSS with the functionality and interface manipulated using jQuery. Tabbed interfaces are great for maximizing the amount of space you have on your site.
Lets take a look at whats going on. We start with the document ready function. The first line of code hides all the tab containers, we then show the first one, and add the class ‘active’ to the first ‘li’ in the tab headers. Then whenever a tab is clicked it simply remove the class ‘active’ from all the tabs, then add it to the tab thats been clicked. We then take the href from the clicked tab and show it. Simple as that! You can get the complete file by grabbing the download and the demos at the bottom also.
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
<div id="tabs">
<ul>
<li><a href="#tab-1">This is Tab 1</a></li>
<li><a href="#tab-2">Tab Two</a></li>
<li><a href="#tab-3">Tab Three</a></li>
<li><a href="#tab-4">Tab Four</a></li>
</ul>
<div id="tab-1">
<h3>This is a really simple tabbed interface</h3>
<p><img src="http://papermashup.com/demos/jquery-gallery/images/t1.png" width="120" height="120" class="thumbs"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio. Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat. <br/>
<a href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom">Subscribe to my feed here</a> </p>
</div>
<div id="tab-2">
<h3>Tab 2</h3>
<p><img src="http://papermashup.com/demos/jquery-gallery/images/t2.png" width="120" height="120" class="thumbs"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec <br/>
<a href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom">Subscribe to my feed here</a></p>
</div>
<div id="tab-3">
<h3>Tab 3</h3>
<p><img src="http://papermashup.com/demos/jquery-gallery/images/t3.png" width="120" height="120" class="thumbs"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio.<br/>
<a href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom">Subscribe to my feed here</a></p>
</div>
<div id="tab-4">
<h3>Tab 4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio. Pellentesque mollis arcu nec metus.<br/>
<a href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom">Subscribe to my feed here</a></p>
</div>
</div>
Simple is definitely the key word here, fantastic tutorial and very easy to follow.
Ben says: Cool, I was looking to do something like this a few days ago. Ended up using the jQuery UI though
Nice tutorial,
Nice demo,
Can you explain how to implement browser history management for tabs with cookie,
i am awaiting to your post
Pingback: 22 fresh design and development related links for you ;) « Adrian Zyzik’s Weblog
Jason Warner says: This one seems more intuitive and clear:
http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/
@jason I think you’ll find the code is pretty much exactly the same. but thanks for the link I’m sure people will find it useful 
Maybe adding the following:
a { outline:none; }
Will help with the tabs showing the outline.
Great post! Thanks for taking the time to write it. I have one question for you, I want some of the ‘s in the to actually link to outside links how can I do that?
Thanks in advance
@whackdesign thanks for the comment, didn’t get the question as the code was removed automatically though 
One Suggestion:
add the immediate-child > selector to the rules
$(‘#tabs > div’).hide();
instead of
$(‘#tabs div’).hide();
In case the user wants to put another element inside of one of the tabs.
Otherwise – perfect, simple, thanks!
Marc Mcleod says: Is it possible to link directly to one of the tabs? E.g. If I wanted to link directly to tab #3 from another page, how could this be achieved?
Vicky says: NICE Graphics..Thanks for the TUT.
Thanks for this! It’s exactly what I needed and works very well. You said you could dig out an example of linking directly to a certain tab from an outside page. Could you please do that? I really need to do this and can’t find the code for this specific tab system.
Please and thank you!
@slacey here’s an example of jQuery tabs where you can link directly to a specific tab:
Demo: http://blemble.com/creative/jquery-tabbed-interface/
Tutorial: http://blemble.com/2009/01/comprehensive-introduction-to-jquery/
Hope that helps.
Ash
Thanks Ashley! I think this will work, although I’m bummed I have to change all my code. Your tabs were so nice and clean!
But thank you for helping me find this one.
@slacey no problem depending on your JavaScript knowledge you might be able to edit my tabs to work with the demo i posted.
at a glance you would need to add the below code:
// Determine which tab should show first based on the URL hash
var panelLocation = location.hash.slice(1);
if(panelLocation){
var panelNum = panelLocation;
}else{
var panelNum = ’1′;
}
joseph says: thanks for your great example
I don’t know to to call it in your code? so, i need to access tab-3 from another page ? what can i do to make the page open in this tab?
Jacob Miller says: I would like to know if its possible to have scroll bars in jQuery tabs?
@Jacob you could just set the contents of the container div to overflow:scroll; with a bit of CSS make sure you set a height on the div and you’ll see the scroll bar on the right.
uppercanuck says: Nice work! Has anyone modified the script to fade out a tab on mouseout?
audrey says: hello,
thanks for the tutorial !
i’m trying to put some columns of text inside the tab-1 but when I use a div inside the tab div it does not appear.
someone in the forum suggested to write $(’#tabs > div’).hide();
instead of
$(’#tabs div’).hide();
I did it but I still don’t manage to put another div element inside one of the tabs…
what should I do ?
thank you for your help,
audrey
@Audrey i cant understand why you’re having problems. If you like you can email me your code to ashley at dotdashcreate dot com and i can take a look for you.
Earl P says: @Ashley, nice code! I’m going to replace some spry ish I have right now. I have nested tabs that I need to link to from another page, this should work. I hoping to be able to pass something like: blabla.html?tab=1#TabbedPanels1
I’ll let you know if it works….
thanks.
E.P.
Earl P says: @Ashley, It works, but a bit different then I thought.
the string is blabla.html?tab=1
One weird thing is that once you pass the string to tab blabla.html?tab=1, I can’t seem to pass to another tab from the url:
example: if I type in blabla.html?tab=1 from the blabla.html?tab=1 page… it won’t pass. I’m not sure I’ll need to, but something I noticed when playing around with it. nice tutorial.
-E.P.
Pingback: Twitted by delicious50
hi
your tutorial is really helpful. I have also 15+ eyes Caching Jquery tabs please see here:-
http://jquery13.blogspot.com/2010/08/15-eyes-catching-jquery-tabs.html
Thanks
Aman
Subscribe to all the Papermashup Tutorials and articles straight to your RSS reader.
Sign up and get all the Papermashup tutorials straight to your inbox.
Follow us on Twitter and get in-stream messages
35 discussions around Simple jQuery tabs