Simple jQuery tabs
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.
The Code
$(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;
});
});
The HTML
<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>Tab 1</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.</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</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.</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.</p> </div> </div>
Simple is definitely the key word here, fantastic tutorial and very easy to follow.
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
[...] Simple jQuery tabs | Papermashup.compapermashup.com [...]
[...] Cities The Minimalist – Recipes for 101 Simple Salads for the Season – NYT Simple jQuery tabs Papermashup.com BBC NEWS Technology Artificial brain ‘10 years away’ mixi Top 10 Travel Gadgets Under [...]
Cool! Thanks for the tut
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 simple tab list, will re-work for a site i’m currently working on!
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!
That was, another <div> element
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?
@Marc yeah it would be possible i’d need to dig out an example of that online
NICE Graphics..Thanks for the TUT.
[...] Simple jQuery tabs | Papermashup.com Tabs con jQuery y CSS (tags: css jquery tabs javascript howto tutorial) [...]
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′;
}
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?
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.
Nice work! Has anyone modified the script to fade out a tab on mouseout?
the best jQuery tabs to use!!!
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.
@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.
@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.
[...] This post was Twitted by delicious50 [...]
[...] Simple jQuery tabs — це туторіал (керівництво) по створенні простеньких вкладок. [...]
Leave a comment...
Connect
Latest Poll
Recent Posts