Posted By

reynish on 10/04/11


Tagged

css tabs


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

spee66


Pure CSS tabs


 / Published in: CSS
 

So there is a little JS around setting the selected tab but they work perfectly without.

  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4.  
  5. Created using /
  6. Source can be edited via /uwixot/9/edit
  7.  
  8. -->
  9. <head>
  10. <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  11. <meta charset=utf-8 />
  12. <title>JS Bin</title>
  13. <!--[if IE]>
  14. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  15. <![endif]-->
  16. <style>
  17. article, aside, figure, footer, header, hgroup,
  18. menu, nav, section { display: block; }
  19.  
  20. #SlideWrapper {width: 300px; overflow: hidden;}
  21. #SlideHolder {width: 600px;}
  22. .slide { width: 300px; float: left;}
  23. .slideNav .selected a { background: aqua; }
  24. </style>
  25. </head>
  26. <body>
  27. <ul class="slideNav">
  28. <li class="selected"><a href="#1">1</a></li>
  29.  
  30. <li><a href="#2">2</a></li>
  31. </ul>
  32. <div id="SlideWrapper">
  33. <div id="SlideHolder">
  34. <div id="1" class="slide">
  35. Some Content
  36. </div>
  37. <div id="2" class="slide">
  38. Some other Content
  39. Some other Content
  40. Some other Content
  41. Some other Content
  42. Some other Content
  43. </div>
  44.  
  45. </div>
  46. </div>
  47. <script>
  48.  
  49. $(".slideNav a").click(function(){
  50. var thisEle = $(this);
  51. var thisPar = thisEle.parent("li")
  52. var thisSib = thisPar.siblings();
  53.  
  54. thisPar.addClass("selected");
  55. thisSib.removeClass("selected");
  56. });
  57.  
  58. </script>
  59. </body>
  60. </html>

Report this snippet  

You need to login to post a comment.