Skip to content

Instantly share code, notes, and snippets.

@apipkin

apipkin/gist:4534826

Last active December 11, 2015 02:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save apipkin/4534826 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save apipkin/4534826 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<title>Winter 2013 - Wk2</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../reset.css">
<style>
.tabView {
position: relative;
}
.tabs {
overflow: hidden;
}
.tab {
float: left;
border: 1px solid blue;
border-bottom-width: 0;
padding: 0 8px;
line-height: 22px;
border-radius: 3px 3px 0 0;
margin: 2px 2px 0;
box-shadow: inset 0 -2px 2px 0px rgba(0,0,0,0.3);
}
.tab-active {
background: red;
box-shadow: none;
}
.tab-content {
width: 300px;
float: left;
border-top: 1px solid blue;
padding: 10px;
display: none;
}
.tab-active-content {
display: block;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div class="tabView">
<ul class="tabs">
<li class="tab tab-active"><a href="#tab1">Tab 1</a></li>
<li class="tab"><a href="#tab2">Tab 2</a></li>
<li class="tab"><a href="#tab3">Tab 3</a></li>
</ul>
<div id="tab1" class="tab-content tab-active-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi leo, consequat ac placerat ut, feugiat at sem. Aliquam erat volutpat. Sed in eros nisi. Donec tincidunt auctor velit quis eleifend. Aliquam euismod, tellus id condimentum gravida, ipsum urna pharetra nisl, vitae laoreet dolor libero id augue. Suspendisse rhoncus ultricies metus vulputate cursus. Etiam dolor ligula, aliquam nec pulvinar in, aliquet quis nisi. Morbi rutrum, sapien iaculis malesuada vulputate, ipsum neque placerat tellus, sit amet imperdiet tortor elit sit amet lacus. Mauris posuere leo quis massa commodo et ultricies tortor rutrum. Donec hendrerit nulla at lectus vulputate vestibulum. Integer erat nisl, rutrum sit amet semper sed, ornare vel orci. Mauris vitae ligula nisl. Fusce hendrerit elit dui. Nunc ullamcorper, velit molestie elementum molestie, eros tellus vulputate massa, ac tempus lacus felis id sem.</p>
</div>
<div id="tab2" class="tab-content">
<p><img src="http://placekitten.com/50/100"> Sed consequat gravida mauris, at viverra dolor vehicula sodales. Cras fermentum blandit sem, et lobortis elit posuere at. Sed sit amet velit id justo rutrum viverra. Cras lobortis elementum tellus, nec volutpat felis pellentesque eu. Fusce ornare dictum hendrerit. Donec aliquam bibendum felis a lobortis. Cras sed lacus urna. Suspendisse potenti. Fusce dolor ante, vulputate ut lobortis nec, varius bibendum diam. Vestibulum eget ligula nec urna mollis egestas. Aliquam lacinia consectetur urna, ac mattis dui pulvinar quis. Duis aliquet porttitor ultrices. Nunc et orci quam. Nullam faucibus porta feugiat. Cras volutpat ullamcorper cursus.</p>
</div>
<div id="tab3" class="tab-content">
<p>Nullam nec feugiat elit. Pellentesque auctor dapibus nibh, vitae auctor ipsum varius a. Nulla molestie velit vitae velit pellentesque bibendum non at purus. Curabitur nec consectetur nisl. Nunc rhoncus tristique massa, ac cursus nisi porttitor vitae. Ut sit amet tortor sem. Nulla id metus felis. Mauris eget mauris urna. Nam ac bibendum tortor. Nullam in mi ac nisi condimentum convallis.</p>
</div>
</div>
<script>
$( document ).ready(function() {
$('.tab').click(function(e) {
$('.tab-active').removeClass('tab-active');
$('.tab-active-content').removeClass('tab-active-content');
$(this).addClass('tab-active');
var href = $(this).find('a').attr('href');
$(href).addClass('tab-active-content');
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment