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

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

Report this snippet  

You need to login to post a comment.