Posted By

avantsi on 04/29/09


Tagged

javascript jquery tabs tab


Versions (?)

Who likes this?

5 people have marked this snippet as a favorite

benrudolph
indamix
jessibird
vali29
enwood


jQuery tabs


 / Published in: jQuery
 

Simple snippet for switching content tabs. You don't need to worry about 'active' classes in HTML.

  1. //javaScript
  2. $().ready(function(){
  3. $('.tabs-content .cms:first').show();
  4. $('.tabs li:first').addClass('active');
  5. $.each($('.tabs li'),function(i,el){
  6. $(el).click(function(){
  7. $('.tabs-content .cms').hide();
  8. $('.tabs-content .cms').eq(i).show();
  9. $('.tabs li').removeClass('active');
  10. $(this).addClass('active');
  11. return false;
  12. });
  13. });
  14. });
  15.  
  16. //HTML
  17. <ul class="tabs">
  18. <li><a href="#">first</a></li>
  19. <li><a href="#">second</a></li>
  20. </ul>
  21. <ul class="tabs-content">
  22. <li class="cms">
  23. first content
  24. </li>
  25. <li class="cms">
  26. second content
  27. </li>
  28. </ul>
  29.  
  30. //CSS
  31. .tabs-content .cms{display:none;}

Report this snippet  

You need to login to post a comment.