Skip to content

Instantly share code, notes, and snippets.

@agat

agat/jquery.micro-tabs.min.js

Created April 20, 2012 07:03
Show Gist options
  • Save agat/2426740 to your computer and use it in GitHub Desktop.
Save agat/2426740 to your computer and use it in GitHub Desktop.
Download ZIP
Smallest jQuery tabs plugin
Raw
jquery.micro-tabs.min.js
/* micro tabs jQuery plugin by Aleksej Romanovskij */
$.fn.tabs=function(c){this.click(function(){var a=$(this);a.parent().add($(a.attr('href'))).addClass(c).siblings().removeClass(c);return!1})}
Raw
jquery.micro-tabs.src.js
$.fn.tabs = function(c) {
this.click(function() {
var a = $(this);
a.parent().add($(a.attr('href'))).
addClass(c).
siblings().
removeClass(c);
return !1
})
}
// use:
$('.f-nav-tabs a').tabs('active');
// argument 'active' - CSS class name for active tabs elements
Raw
micro_tabs.html
<html>
<head>
<title>jQuery tabs plugin - jsFiddle demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body {
padding: 10px;
font: normal 13px / 18px Arial, 'Helvetica Neue', Helvetica, sans-serif;
background: #fff;
color: #444;
}
a {
color: #268bd2;
}
.f-nav {
zoom: 1;
margin: 0 0 12px 0;
padding: 0;
position: relative;
}
.f-nav:before,
.f-nav:after {
display: table;
content: '';
}
.f-nav:after {
clear: both;
}
.f-nav > li {
float: left;
list-style: none;
margin: 0 18px 0 0;
position: relative;
}
.f-nav > li > a {
display: block;
line-height: 28px;
text-decoration: none;
}
.f-nav > li > a:hover {
color: #000;
}
.f-nav > .active a,
.f-nav > .active a:hover {
colorolor: #000;
}
.f-nav-tabs {
border-bottom: 1px solid #d9d9d9;
}
.f-nav-tabs > li {
margin: 0 6px -1px 0;
}
.f-nav-tabs > li > a {
border-radius: 3px 3px 0 0;
border-bottom: 1px solid transparent;
padding: 1px 10px 0;
}
.f-nav-tabs > li > a:hover {
background: #eee;
border-color: #d9d9d9;
}
.f-nav-tabs > .active a,
.f-nav-tabs > .active a:hover {
background: #fff;
border: 1px solid #d9d9d9;
border-bottom: 1px solid #fff;
padding: 0 10px;
}
.f-tab {
display: none;
}
.f-tab.active {
display: block;
}
</style>
<script type="text/javascript">
/* micro tabs jQuery plugin by Aleksej Romanovskij */
$.fn.tabs = function(c) {
this.click(function() {
var a = $(this)
a.parent().add($(a.attr('href'))).
addClass(c).
siblings().
removeClass(c)
return !1
})
}
$(function() {
$('.f-nav-tabs a').tabs('active');
});
</script>
</head>
<body>
<ul class="f-nav f-nav-tabs">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
</ul>
<div id="home" class="f-tab active">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum aliquet lorem. Duis rhoncus bibendum eleifend.
</div>
<div id="profile" class="f-tab">
Aliquam arcu libero, interdum a mollis a, imperdiet eget velit. Sed porta diam sed quam semper quis semper elit convallis.
</div>
<div id="messages" class="f-tab">
Nulla tincidunt, sapien ultricies gravida ornare, est est lacinia lectus, eu pellentesque tellus orci eu mi.
</div>
<div id="settings" class="f-tab">
Donec vestibulum, erat vel vestibulum hendrerit, purus enim malesuada lorem, ut sollicitudin odio lacus sed metus.
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment