Skip to content

Instantly share code, notes, and snippets.

@robbiegod

robbiegod/index.html

Last active November 23, 2015 17:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save robbiegod/bc4a9ae506d4f11a981f to your computer and use it in GitHub Desktop.
Save robbiegod/bc4a9ae506d4f11a981f to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Basic Tab Setup
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Basic jQuery Tabs Content</title>
</head>
<body>
<p>Be sure to load jquery into the page</p>
<p>Load the tabs.js file after jquery.</p>
<p>Use this if for some reason jquery UI is not available.</p>
<div class="setabs tab-container">
<ul class="setab-links">
<li class="tab1 active"><a href="#tab1">Tab #1</a></li>
<li class="tab2"><a href="#tab2">Tab #2</a></li>
</ul>
<div id="setabs-content" class="setab active">
<div id="tab1">
<h1>This is tab #1 content</h1>
<p>This is tab #1 content. You can put whatever you want here.</p>
</div>
<div id="tab2" class="setab">
<h1>This is tab #2 content</h1>
<p>This is tab #2 content. You can put whatever you want here.</p>
</div>
</div>
</div>
</body>
</html>
Raw
style.css
.setabs { width:100%; display:inline-block; }
.setab-links:after { display:block; clear:both; content:''; }
ul.setab-links { list-style:none; margin: 0; padding: 0; }
ul.setab-links li {
float:left;
list-style:none;
background: #333333;
width:44%;
color: #fff;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0px 0px;
text-align: center;
height: 75px;
margin: 0 3px;
}
ul.setab-links li:first-child { margin-left: 0px; }
ul.setab-links li:last-child { margin-right: 0px; }
ul.setab-links li a,
ul.setab-links li a:link {
width: 100%;
color:#fff;
line-height: 1;
outline: none;
padding-top: 20px;
display:inline-block;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius:8px 8px 0px 0px;
font-weight:400;
transition:all linear 0.15s;
height: 75px;
}
ul.setab-links li a span,
ul.setab-links li a:link span {
display:block;
}
ul.setab-links li.active a,
ul.setab-links li.active a:link {
color:#fff;
height: 100px;
background-color: #666666;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
ul.setab-links li.active a:hover {
width:100%;
background-color: #666666;
color:#fff;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius:8px 8px 0px 0px;
}
#setabs-content {
padding:50px;
width:100%;
margin-top:6px;
background: #666666;
border-radius: 0 8px 8px 8px;
}
#setabs-content .col { float:left; }
#setabs-content .setabs-col-6 { width:60%; }
#setabs-content .setabs-col-4 { width:40%; }
#setabs-content h3 { font-size:1.8em; color:#fff; line-height:1.2; }
#setabs-content h4 { font-size:1em; color:#fff; line-height:1.2; padding-bottom: 50px;}
#setabs-content p { font-size:.9em; color:#fff; font-weight:normal; line-height: 1.2; padding-right:15px; }
#setabs-content p strong { font-weight:bold; }
#setabs-content .hr-divider { display:block; width:90%; border-top:rgba(255,255,255,0.40) solid 1px; margin: 1em 0 1em 0; }
.setab { display:none; }
.setab.active { display:inline-block; }
Raw
tabs.js
/*
Basic jQuery Tabs Code
@Credits - I'll add those soon. Must find where i got this from.
*/
jQuery(document).ready(function() {
jQuery('.setabs .setab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.setabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment