lukempeters-blog-blog - Tumblr blog

jQuery Tab Switcher

This tutorial will take you through creating a multi-tabbed container whose content is switched out based on which tab you've pressed.

VIEW DEMO

I've made it fully copy-and-pastable. You'll just need the jQuery library file (which you can download here) to be in the same directory as your code, unless you specify otherwise.

I explain the jQuery line by line down below where the full code is pasted.

Also, read the comments in the CSS for a few important notes.

The HTML

<div id="tabs"> <a href="javascript:void(0)" id="1" class="button active">One</a> <a href="javascript:void(0)" id="2" class="button">Two</a> <a href="javascript:void(0)" id="3" class="button">Three</a> <a href="javascript:void(0)" id="4" class="button">Four</a> </div> <div id="pagesWrapper"> <div class="page 1"> <h4>Page 1</h4> <p>This is Page 1.</p> </div> <div class="page 2"> <h4>Page 2</h4> <p>This is Page 2.</p> </div> <div class="page 3"> <h4>Page 3</h4> <p>This is Page 3.</p> </div> <div class="page 4"> <h4>Page 4</h4> <p>This is Page 4.</p> </div> </div>

The CSS

body { margin: 0; font-family: Tahoma, Verdana, Arial, Sans; font-size: 13px; color: #444444; background: #bbddff; } div#tabs { height: 26px; } div#tabs a, div#tabs a:visited { padding: 4px 14px 0; height: 22px; color: #555555; text-decoration: none; display: inline-block; background: #eeeeee; } div#tabs a:hover { color: #111111; background: #e7e7e7; } div#tabs a.active { color: #ff5555; background: #ffffff; } div#tabs a:focus { outline: none; } div#pagesWrapper { position: relative; height: 400px; background: #ffffff; } div.page {

position: absolute; /* This is important! It makes all of the page divs sit on top of each other so that when they crossfade in and out over each other they’re not bumping all over the page. */

top: 0;

padding: 30px; display: none; /* This is also important! It hides all of the page divs to start with, so that the first can be shown (via jQuery). */

}

p { margin: 0 0 12px 0; }

The jQuery

$(document).ready(function(){ $('.page:first').show(); $('.button').click(function(){ var tabToShow = '.' + $(this).attr('id'); $('.button').removeClass('active'); $(this).addClass('active'); $('.page').fadeOut(200); $(tabToShow).fadeIn(200); }); });

The FULL Freakin Page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > <html lang="en"> <head> <title>Tab Switcher</title> <style type="text/css"> body { margin: 0; font-family: Tahoma, Verdana, Arial, Sans; font-size: 13px; color: #444444; background: #bbddff; } div#wrapper { margin: 0 auto; margin-top: 40px; width: 800px; } div#tabs { height: 26px; } div#tabs a, div#tabs a:visited { padding: 4px 14px 0; height: 22px; color: #555555; text-decoration: none; display: inline-block; background: #eeeeee; } div#tabs a:hover { color: #111111; background: #e7e7e7; } div#tabs a.active { color: #ff5555; background: #ffffff; } div#tabs a:focus { outline: none; } div#pagesWrapper { position: relative; height: 400px; background: #ffffff; } div.page {

position: absolute; /* This is important! It makes all of the page divs sit on top of each other so that when they crossfade in and out over each other they're not bumping all over the page. */

top: 0; padding: 30px; display: none; /* This is also important! It hides all of the page divs to start with, so that the first can be shown (via jQuery). */

} h1 { margin: 0 0 6px 0; font-size: 26px; text-shadow: 1px 1px 0 #cceeff; } h4 { margin: 0 0 4px 0; padding: 0; } p { margin: 0 0 12px 0; } small { margin: 0 0 22px 0; display: block; } a, a:visited { color: #ff5555; } </style> <script type="text/javascript" src="jquery1.5.1.js"></script> <script type="text/javascript"> // This selects when to start running the code below (once the document is ready). $(document).ready(function(){ // This shows the first div of the four divs. $('.page:first').show(); // This says, Once someone clicks on an element with the class of 'button', do the crap below. $('.button').click(function(){ // This creates a variable that makes a CLASS out of the ID of the button clicked. // Each button has an ID (1, 2, 3 and 4), so this line finds the ID of the button clicked and puts it into a string with a dot in front of it, thus making the string read '.1' if the first button was clicked. var tabToShow = '.' + $(this).attr('id'); // This removes the 'active' class from all buttons (because you clicked another button, so the old one is no longer active). $('.button').removeClass('active'); // This adds a class of 'active' to the button that was clicked. In the CSS you can specify what the active button should look like based on this class name. $(this).addClass('active'); // This fades out any page that was currently visible, so that the next can fade in. $('.page').fadeOut(200); // This uses the VARIABLE WE CREATED a few lines ago (which is a string with a dot and then the ID of the button clicked) to select the class of the correct next page to show. Page 1 has a class of '1' and Button 1 has an ID of '1', so that they can reference each other via the variable we created. $(tabToShow).fadeIn(200); // The end. }); }); </script> </head> <body> <div id="wrapper"> <h1>jQuery Tab Switcher</h1> <small>by <a href="http://lukepeters.me">Luke Peters</a></small> <div id="tabs"> <a href="javascript:void(0)" id="1" class="button active">One</a> <a href="javascript:void(0)" id="2" class="button">Two</a> <a href="javascript:void(0)" id="3" class="button">Three</a> <a href="javascript:void(0)" id="4" class="button">Four</a> </div> <div id="pagesWrapper"> <div class="page 1"> <h4>Page 1</h4> <p>This is Page 1.</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p> </div> <div class="page 2"> <h4>Page 2</h4> <p>This is Page 2.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="page 3"> <h4>Page 3</h4> <p>This is Page 3.</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> </div> <div class="page 4"> <h4>Page 4</h4> <p>This is Page 4.</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> </div> </div> </div> </body> </html>

Did you read all of the comments? I know you may want to just paste it in your page and play with it until it works, but understanding the concepts behind how things work will help you learn much, much faster. I hope I was clear enough in my explanations.

Cheers until the next post! Post your comments and questions here.