Skip to content

Instantly share code, notes, and snippets.

@nw

nw/tabs.html

Last active August 29, 2015 14:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save nw/ad65982cac9b97ee8c3f to your computer and use it in GitHub Desktop.
Save nw/ad65982cac9b97ee8c3f to your computer and use it in GitHub Desktop.
Download ZIP
tabs
Raw
tabs.html
<html>
<head>
<style>
body {
background: #ccc;
}
.tab-wrapper {
width: 50%;
margin: auto;
}
.tab-wrapper.pretty {
width: 75%;
}
ul.tabs {
display: block;
height: 30px;
}
ul.tabs li {
float: left;
margin-right: 12px;
border: 1px solid black;
padding: 8px;
margin-top: 11px;
background: #ccc;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
cursor: pointer;
}
.pretty ul.tabs li {
background: red;
font-size: 24px;
margin-top: 1px;
}
ul.tabs li.active {
background: white;
border-bottom: 1px solid white;
}
.tab-wrapper .panels {
border: 1px solid black;
min-height: 100px;
background: white;
border-radius: 12px;
}
.tab-wrapper .panels .panel {
display: none;
padding: 24px;
}
.tab-wrapper .panels .panel.active {
display: block;
}
</style>
</head>
<body>
<div class="tab-wrapper">
<ul class="tabs">
<li>Tab 1</li>
<li class="active">Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="panels">
<div class="panel">
<p>Panel 1</p>
</div>
<div class="panel active">
<p>Panel 2</p>
</div>
<div class="panel">
<p>Panel 3</p>
</div>
</div>
</div>
<div class="tab-wrapper pretty">
<ul class="tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="panels">
<div class="panel active">
<p>Panel 1</p>
</div>
<div class="panel">
<p>Panel 2</p>
</div>
<div class="panel">
<p>Panel 3</p>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript" src="tabs.js"></script>
</body>
</html>
Raw
tabs.js
$(function(){
var wrappers = $('.tab-wrapper');
wrappers.each(function(){
var wrapper = $(this);
attachTabs(wrapper);
});
function attachTabs(wrapper){
var tabs = wrapper.find('ul.tabs li');
var panels = wrapper.find('.panels .panel');
tabs.on('click', function(event){
tabs.removeClass('active');
panels.removeClass('active');
var current_tab = this;
$(current_tab).addClass('active');
tabs.each(function(idx){
if(current_tab == this){
$(panels.get(idx)).addClass('active');
}
});
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment