Ultra simple jQuery tabs

Posted August 31st, 2009 in Tutorials, Web Design

jQuery tabs

Tabs are perhaps one of the most popular layouts used in web design today – particular in sidebars. In this tutorial we’ll be using the jQuery library to build an ultra simple tabbed layout in less than 20 lines of javascript!



1. The HTML

Firstly, we’re going to setup the HTML:

1
2
3
4
5
6
7
8
9
10
11
<div id="wrapper">
    <ul class="tabs">
        <li><a href="#" class="defaulttab" rel="tabs1">Tab #1</a></li>
        <li><a href="#" rel="tabs2">Tab #2</a></li>
        <li><a href="#" rel="tabs3">Tab #3</a></li>
    </ul>
 
    <div class="tab-content" id="tabs1">Tab #1 content</div>
    <div class="tab-content" id="tabs2">Tab #2 content</div>
    <div class="tab-content" id="tabs3">Tab #3 content</div>
</div>

The syntax here is pretty simple – firstly we have 3 links in a list which will become the tabs once we add some CSS. The rel attribute is used to store the ID of the corresponding content div for that tab. The default tab to show has the class “defaulttab”

Then we have the 3 content holders, each with class tab-content and the ID which matches that of the corresponding tab’s “rel” attribute.

2. The CSS

Next, the CSS. This transforms the links into “tabs” – it’s a pretty simple layout – nothing special. This tutorial is more focused on the javascript rather than the style.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
body {
    font-family:Arial;
}
#wrapper {
    width:250px;
}
ul.tabs {
    width:250px;
    margin:0;
    padding:0;
}
ul.tabs li {
    display:block;
    float:left;
    padding:0 5px;
}
ul.tabs li a {
    display:block;
    float:left;
    padding:5px;
    font-size:0.8em;
    background-color:#e0e0e0;
    color:#666;
    text-decoration:none;
}
.selected {
    font-weight:bold;
}
.tab-content {
    clear:both;
    border:1px solid #ddd;
    padding:10px;
}

This is straight forward CSS here – notice the selected class, this will be applied to the currently selected tab LINK (i.e. the a tag).

3. The Javascript

Next up is the javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function() {
 
	$('.tabs a').click(function(){
		switch_tabs($(this));
	});
 
	switch_tabs($('.defaulttab'));
 
});
 
function switch_tabs(obj)
{
	$('.tab-content').hide();
	$('.tabs a').removeClass("selected");
	var id = obj.attr("rel");
 
	$('#'+id).show();
	obj.addClass("selected");
}

Let’s go through it bit by bit:

1
$(document).ready(function() {

This bit of jQuery (denoted by the $) creates a function which will be executed once the page has loaded.

1
2
3
	$('ul.tabs a').click(function(){
		switch_tabs($(this));
	});

This section adds a function to the click event of all links in the “ul.tabs” list. The function will call another function, our own, called “switch_tabs” with the argument $(this). This will be a jQuery object of the current tab.

1
	switch_tabs($('.defaulttab'));

This last bit will also call the switch_tabs function, but with the argument $(‘.defaulttab’), this is the jQuery object of the default tab (i.e. the one with class “defaulttab”). This code will is not attached to an event like the previous snippet and so will run once the page first loads.

Finally, we have the switch_tabs function which was called to previously.

1
2
3
4
5
6
7
function switch_tabs(obj)
{
	$('.tab-content').hide();
	$('ul.tabs a').removeClass("selected");
	$('#'+obj.attr("rel")).show();
	obj.addClass("selected");
}

This is the function that handles all the switching of tabs. The first line sets up the function with a single parameter called obj – this is expected to be the jQuery object of the tab to switch to.

Line 3 hides all the tab content while line 4 removes the “selected” class from all of the tabs.

Line 5 uses the tabs rel attribute to obtain the ID of the tab content and displays it using the show() method.

Finally line 6 adds the selected class to clicked tab.

1
});

This bit just finishes off the code!

Put it all together and you have a very simple tab layout ready to go, you can view a working demo right here

This script has been tested on Firefox, Chrome and IE6-8

17 Responses to “Ultra simple jQuery tabs”

  1. Steve says:

    While I like this, there’s a small problem. If the tabs are placed at the bottom of the page, clicking a tab will change the tab AND jump to the top of the page.

    Any way to get around this?

  2. admin says:

    Sure, simply replace the # in the href of the tab links with ‘javascript:void(0)’

    e.g.

    Tab #1

  3. Ganry65 says:

    The savings were both man-hours and the construction of the iron prototype. ,

  4. graeme says:

    thank you so much, I’ve been trying out tutorials all day and couldn’t get anything to work. Tried this one and it worked first time. Excellent stuff!
    G

  5. Carl says:

    Perfectly simple…what I’ve been looking for for about a week now. Is it possible to make the “selected” tab have a different background color that the rest? Adding to the .selected {} section of the css only allows you to alter the text. Thaks again.

  6. Carl says:

    Perfectly simple…what I’ve been looking for for about a week now. Is it possible to make the “selected” tab have a different background color that the rest? Adding to the .selected {} section of the css only allows you to alter the text. Thaks again.

    Sorry for the double post…misspelled my email address the first time.

  7. admin says:

    @carl:

    You just need to change ‘.selected’ to ‘ul.tabs li a.selected’

    Then you should be able to change the background!

  8. Norman says:

    thanks for the tutorial, helped me alot with the tab system in one of my sidebars :)

  9. James says:

    If coupling this with the “sliding door”(1) technique for image based tabs, how do we get both images to work in the .selected section of the css?

    I have only been able to get my left half to work…

    Thanks!

    -James

    (1) http://www.alistapart.com/articles/slidingdoors/

  10. James says:

    A follow up question, my first having been resolved via this tutorial:

    http://www.webdesignerwall.com/tutorials/css-the-all-expandable-box/

    Is it possible to make a link from another page target a specific tab as the default?

    Specifically, I have four tabs, and depending on what link a person clicks on to reach my tabbed area, I want a different tab to be selected by default,

    Thank you again!

    -James

  11. Ricardo Zea says:

    Quick question:

    Is there a way to be able to hide/close the tab you’re looking at?

    The reason I ask is because if this can be done, then this script could also be used for a main navigation bar where you have large megamenus that users activate/deactivate via click.

    Any idea how this small addition can be done?

    Thanks in advance.

    PS. I’ve used your tabs several times already in other projects.

  12. Envergure says:

    Good scripts and very simple to use !

    Thank you

  13. Ricardo Zea says:

    There’s a small issue with this script though: It won’t work if you need to nest tabs within tabs.

    Bummer.

  14. henry says:

    Hi this script is really slick and easy to use. Is there any chance you could deomnstrate how to use multiple instances of the tabs on the same page. I want to reuse the tabs elsewhere on my page.

    Many thanks

  15. Ista says:

    Hi,
    Your code is great and exactly what I was after so thanks, but I was wondering if there was a way of highlighting the selected tab by using a colour instead of making it bold. Thank you for any help you can give me.

    Cheers,

    Ista

Leave a Reply