advanced code snippet search

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.

Expand | Embed | Plain Text 
  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.