Simple jQuery Tabs Tutorial

This is the demo for the jQuery Tabs Tutorial entry on my blog.

The Finished Product

Tab 1

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.

Tab 2

Morbi leo turpis, pellentesque at, luctus et, ornare non, risus. Vivamus orci. Integer placerat aliquam sem. Ut eu nisl in tortor iaculis convallis. Duis accumsan quam sit amet ipsum. Nam pretium. Vestibulum varius sollicitudin eros. Aenean imperdiet dignissim lacus. Donec lacinia turpis ac urna. Nulla libero augue, fringilla et, vulputate dictum, volutpat sit amet, justo. Integer eu lectus sed neque tempus pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent dapibus, urna ac luctus bibendum, augue libero tincidunt dui, ac fringilla odio metus sed purus.

Tab 3

Integer adipiscing mollis purus. Duis mattis purus et purus. Mauris in pede sit amet nunc tincidunt rhoncus. In hac habitasse platea dictumst. Phasellus at nulla quis arcu pharetra commodo. Mauris suscipit. Nulla sagittis. Morbi fermentum feugiat leo. Vivamus sapien nulla, commodo ut, convallis eget, ullamcorper ut, sapien. Praesent sodales varius pede.

Tab 4

Integer libero. Aenean porttitor, nibh viverra porttitor eleifend, nulla erat malesuada mauris, a facilisis lacus justo ac enim. Fusce viverra, eros eu cursus posuere, eros nunc viverra turpis, a lacinia arcu nulla nec sem. Curabitur a augue. Pellentesque commodo pede quis quam. Sed sapien ligula, accumsan sed, lobortis vitae, malesuada vitae, est. Duis mollis. Curabitur feugiat ullamcorper ligula. Nullam lectus lacus, congue vel, dictum eu, mattis vel, pede. Quisque auctor felis quis justo.

The jQuery

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $('#tabs div').hide(); // Hide all divs
  4. $('#tabs div:first').show(); // Show the first div
  5. $('#tabs ul li:first').addClass('active'); // Set the class for active state
  6. $('#tabs ul li a').click(function(){ // When link is clicked
  7. $('#tabs ul li').removeClass('active'); // Remove active class from links
  8. $(this).parent().addClass('active'); //Set parent of clicked link class to active
  9. var currentTab = $(this).attr('href'); // Set currentTab to value of href attribute
  10. $('#tabs div').hide(); // Hide all divs
  11. $(currentTab).show(); // Show div with id equal to variable currentTab
  12. return false;
  13. });
  14. });
  15. </script>

The CSS

  1. #tabs {
  2. font-size: 90%;
  3. margin: 20px 0;
  4. }
  5. #tabs ul {
  6. float: right;
  7. background: #E3FEFA;
  8. width: 600px;
  9. padding-top: 4px;
  10. }
  11. #tabs li {
  12. margin-left: 8px;
  13. list-style: none;
  14. }
  15. * html #tabs li {
  16. display: inline; /* ie6 double float margin bug */
  17. }
  18. #tabs li,
  19. #tabs li a {
  20. float: left;
  21. }
  22. #tabs ul li a {
  23. text-decoration: none;
  24. padding: 8px;
  25. color: #0073BF;
  26. font-weight: bold;
  27. }
  28. #tabs ul li.active {
  29. background: #CEE1EF url(img/nav-right.gif) no-repeat right top;
  30. }
  31. #tabs ul li.active a {
  32. background: url(img/nav-left.gif) no-repeat left top;
  33. color: #333333;
  34. }
  35. #tabs div {
  36. background: #CEE1EF;
  37. clear: both;
  38. padding: 20px;
  39. min-height: 200px;
  40. }
  41. #tabs div h3 {
  42. text-transform: uppercase;
  43. margin-bottom: 10px;
  44. letter-spacing: 1px;
  45. }
  46. #tabs div p {
  47. line-height: 150%;
  48. }

Back to the jQuery Tabs Tutorial blog entry.