Posted By

cyberhobo on 08/19/09


Tagged

simple tabs jquery-core


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

Flocke
cfleschhut
vali29
kwameboame


Simple tabs with jQuery Core (not jQuery UI)


 / Published in: jQuery
 

URL: http://www.cyberhobo.net/samples/simple-tabs.html

Sometimes I want simple tabs without all the packaging of jQuery UI with a theme. This does the job with just jQuery 1.2.6, and should work with later versions.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Simple jQuery Tabs</title>
  6.  
  7. <script src="js/jquery-1.2.6.min.js" type='text/javascript'></script>
  8.  
  9. <script type="text/javascript">
  10. jQuery( function($) {
  11. $('.simple-tabs').each( function() {
  12. var container = $(this);
  13. container.find('> ul li a').click( function () {
  14. $(this).parent().addClass( 'selected-tab' ).siblings().removeClass( 'selected-tab' );
  15. container.find('.tab-panel').hide().filter(this.hash).show();
  16. return false;
  17. }).eq(0).click();
  18. });
  19. });
  20. </script>
  21.  
  22. <style type="text/css">
  23. .simple-tabs ul {
  24. /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
  25. float: left; position: relative; border-right: 1px solid #ddd; bottom: -1px;
  26. }
  27. .simple-tabs li {
  28. /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
  29. float: left; border: 1px solid #ddd; border-right: none;
  30. }
  31. .simple-tabs li a {
  32. /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
  33. float: left; text-decoration: none; padding: .5em 1.7em; color: #555555; background: #e6e6e6;
  34. }
  35. .simple-tabs li a:hover { background: #dadada; color: #212121; }
  36. .simple-tabs li.selected-tab { border-bottom-color: #fff; }
  37. .simple-tabs li.selected-tab a, .simple-tabs li.selected-tab a:hover { background: #fff; }
  38. .tab-panel { clear:left; border: 1px solid #d3d3d3; background: #ffffff; color: #222222; padding: 1.5em 1.7em; }
  39. </style>
  40.  
  41. </head>
  42. <body>
  43.  
  44. <h1>Simple Tabs with jQuery (not jQuery UI)</h1>
  45.  
  46. <div id="tab-set-1" class="simple-tabs">
  47. <ul>
  48. <li><a href="#tab-1-1" title="">Tab 1</a></li>
  49. <li><a href="#tab-1-2" title="">Tab 2</a></li>
  50. </ul>
  51.  
  52. <div id="tab-1-1" class="tab-panel">
  53. <h2>Tab 1 panel</h2>
  54. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  55. </div>
  56.  
  57. <div id="tab-1-2" class="tab-panel">
  58. <h2>Tab 2 panel</h2>
  59. <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
  60. </div>
  61.  
  62. </div>
  63.  
  64. <div id="tab-set-2" class="simple-tabs">
  65. <ul>
  66. <li><a href="#tab-2-a" title="">Tab A</a></li>
  67. <li><a href="#tab-2-b" title="">Tab B</a></li>
  68. <li><a href="#tab-2-c" title="">Tab C</a></li>
  69. </ul>
  70.  
  71. <div id="tab-2-a" class="tab-panel">
  72. <h2>Tab A panel</h2>
  73. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  74. </div>
  75.  
  76. <div id="tab-2-b" class="tab-panel">
  77. <h2>Tab B panel</h2>
  78. <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
  79. </div>
  80.  
  81. <div id="tab-2-c" class="tab-panel">
  82. <h2>Tab C panel</h2>
  83. <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
  84. </div>
  85.  
  86. </div>
  87.  
  88. </body>
  89. </html>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: cfleschhut on August 20, 2009

thanks, this was very helpful!

instead of “splitting” the href of a clicked tab to get the id of the corresponding tab pane you can also do:

container.find('.tab-panel').hide().filter(this.hash).show();

(http://jqueryfordesigners.com/jquery-tabs/)

Posted By: cyberhobo on August 21, 2009

that is an improvement, thanks!

You need to login to post a comment.