advanced code snippet search

Posted By

sebikovacs on 11/16/10


Tagged

tabs tabbed


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Some0ne


Tabs

 / Published in: XHTML
 

You must have jQuery of course

Expand | Embed | Plain Text 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. 	<head>
  4. 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. 		<title>Tabs</title>
  6. 		<style type="text/css">
  7. 			.tab{
  8. 				display:none;
  9. 			}
  10. 			#tab1{
  11. 				display:block;
  12. 			}
  13. 		</style>
  14. 		<script type="text/javascript">
  15. 			//tabs..............................................................
  16. 			$('.tabs a').click(function(){
  17. 				var rel = $(this).attr('rel'),
  18. 					theParent = $(this).parent().parent().parent();
  19. 				$('.tab',theParent).hide();
  20. 				$('#tab'+rel,theParent).show();
  21. 				$('.tabs a',theParent).removeClass('selected');
  22. 				$(this).addClass('selected');
  23. 				return false;
  24. 			});
  25. 		</script>
  26. 	</head>
  27. 	<body>
  28. 		<div class="tab-holder">
  29. 			<ul class="tabs">
  30. 				<li><a class="selected" rel="1" href="" title="">Tab1</a></li>
  31. 				<li><a rel="2" href="" title="">Tab2</a></li>
  32. 				<li><a rel="3" href="" title="">Tab3</a></li>
  33.                                 <li><a rel="4" href="" title="">Tab4</a></li>
  34. 			</ul>
  35. 			<div class="tab" id="tab1">
  36. 				<!--tab content-->
  37. 			</div>
  38. 			<div class="tab" id="tab2">
  39. 				<!--tab content-->
  40. 			</div>
  41. 			<div class="tab" id="tab3">
  42. 				<!--tab content-->
  43. 			</div>
  44. 			<div class="tab" id="tab4">
  45. 				<!--tab content-->
  46. 			</div>
  47. 		</div><!--/tab-holder-->
  48. 	</body>
  49. </html>

Report this snippet  

You need to login to post a comment.