agat/jquery.micro-tabs.min.js

## 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})}

## 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

## 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>
	/* 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})}
	$.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
	<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>