advanced code snippet search

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.

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