<div class="tabs">
<ul id="tabs-nav">
<li><a href="#tab1">Bob</a></li>
<li><a href="#tab2">Dante</a></li>
<li><a href="#tab3">Randall</a></li>
<li><a href="#tab4">Jay</a></li>
</ul> <!-- END tabs-nav -->
<div id="tabs-content">
<div id="tab1" class="tab-content">
<h2>Silent Bob</h2>
<p>"You know, there's a million fine looking women in the world, dude. But they don't all bring you lasagna at work. Most of 'em just cheat on you."</p>
</div>
<div id="tab2" class="tab-content">
<h2>Dante Hicks</h2>
<p>"My friend here's trying to convince me that any independent contractors who were working on the uncompleted Death Star were innocent victims when it was destroyed by the Rebels."</p>
</div>
<div id="tab3" class="tab-content">
<h2>Randall Graves</h2>
<p>"In light of this lurid tale, I don't even see how you can romanticize your relationship with Caitlin. She broke your heart and inadvertently drove men to deviant lifestyles."</p>
</div>
<div id="tab4" class="tab-content">
<h2>Jay</h2>
<p>"I don't care if she's my cousin or not, I'm gonna knock those boots again tonight."</p>
</div>
</div> <!-- END tabs-content -->
</div> <!-- END tabs -->/* Tabs */
.tabs {
width: 600px;
background-color: #09F;
border-radius: 5px 5px 5px 5px;
}
ul#tabs-nav {
list-style: none;
margin: 0;
padding: 5px;
overflow: auto;
}
ul#tabs-nav li {
float: left;
font-weight: bold;
margin-right: 2px;
padding: 8px 10px;
border-radius: 5px 5px 5px 5px;
/*border: 1px solid #d5d5de;
border-bottom: none;*/
cursor: pointer;
}
ul#tabs-nav li:hover,
ul#tabs-nav li.active {
background-color: #08E;
}
#tabs-nav li a {
text-decoration: none;
color: #FFF;
}
.tab-content {
padding: 10px;
border: 5px solid #09F;
background-color: #FFF;
}
/* Just for CodePen styling - don't include if you copy paste */
html {
margin: 0;
padding: 0;
}
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin: 2em;
}// Show the first tab and hide the rest
$('#tabs-nav li:first-child').addClass('active');
$('.tab-content').hide();
$('.tab-content:first').show();
// Click function
$('#tabs-nav li').click(function(){
$('#tabs-nav li').removeClass('active');
$(this).addClass('active');
$('.tab-content').hide();
var activeTab = $(this).find('a').attr('href');
$(activeTab).fadeIn();
return false;
});
External CSS
This Pen doesn't use any external CSS resources.