jQuery tabs are a well-known topic and it seems that almost all the possible variants on this theme have been discussed exhaustively. CSS3 transitions can be actually used to create the same effect thanks to the :target pseudo-class. Let's see how.
We start with the following markup:
<div class="tabs">
<!-- tabs -->
<ul class="tabNavigation">
<li><a href="#message">Send a message</a></li>
<li><a href="#shareFile">Share a file</a></li>
<li><a href="#arrange">Arrange a meetup</a></li>
</ul>
<!-- tab containers -->
<div id="message">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div id="shareFile">
<p>Sed do eiusmod tempor incididunt.</p>
</div>
<div id="arrange">
<p>Ut enim ad minim veniam</p>
</div>
</div>
As you can see, each tab link has its own target element, that is, the hash it points to (an anchor). Using then the :target pseudo-class is pretty easy:
div.tabs {
margin: 2em;
position: relative;
}
ul.tabNavigation {
height: 2em;
border-bottom: 1px solid #ccc;
}
ul.tabNavigation li {
float: left;
margin-right: 0.5em;
}
ul.tabNavigation a {
display: block;
padding: 0 0.5em;
background: #ccc;
text-decoration: none;
color: #000;
border-radius: 6px 6px 0 0;
height: 2em;
line-height: 2;
}
div.tabs div {
margin: 2em 0;
position: absolute;
left: -1000em;
top: auto;
-moz-transition: all 500ms ease-out;
-webkit-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
-ms-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
div.tabs div:target {
left: 0;
}
Once registered the CSS3 transitions on the targeted elements, we activate the transition only when a user clicks on a link, namely when the :target pseudo-class comes into play. You can see the demo below.