CodePen

HTML

            
              <nav>
   <a href="#one">First tab</a>
   <a href="#two">Second</a>
   <a href="#three">Third</a>
  <a href="#four">Four</a>
</nav>


<article>
	<section id="one">
	<h3>First</h3>
	<p>All About first one.</p>
	</section>
	
	<section id="two">
	<h3>Second</h3>
	<p>Here it is second.</p>
	</section>
	
		<section id="three">
	<h3>Third</h3>
	<p>third.</p>
	</section>
  
  <section id="four">
	<h3>Four</h3>
	<p>And finally third.</p>
	</section>
</article>

            
          
!
via HTML Inspector

CSS

            
              section {-webkit-animation: switching-left 0.3s;}

@-webkit-keyframes switching-right {
    0% {
	    -webkit-transform: rotate(-90deg) translate(-1000px,500px) scale(0);
	   }
    
   100% {
	   
    }
}

@-webkit-keyframes switching-left {
    0% {
	    -webkit-transform: rotate(90deg) translate(-1000px,500px) scale(0);
	   }
    
   100% {
	   
    }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).ready(function(){

	$('section').hide();
	$('section:first').show();
	$('nav a:first').addClass('active');
 
	$('nav a').click(function(){
		$('nav a:first').removeClass('active');
		$(this).parent().addClass('active');
		
		var currentTab = $(this).attr('href');
		$('section').hide();
		$(currentTab).show();
		return false;
	});

});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................