jQuery - tab plugin

.hcTabContentSelected,
.hcTabContent{color:white;  clear:both; padding:10px; }
.hcTabContent{display:none;
border-top-right-radius:12px;
-moz-border-radius-topright:12px;
-webkit-border-top-right-radius:12px;
border-bottom-right-radius:12px;
-moz-border-radius-bottomright:12px;
-webkit-border-bottom-right-radius:12px;
}
.hcTabContentSelected{display:block; background:#2f6172; padding-top:40px;}
li.hcTab{display:block; font-weight:bold; float:left; padding:10px 20px; 
margin:0px 20px 0px 0px; 
background:none; background:#333; cursor:pointer;
border-top-right-radius:12px;
-moz-border-radius-topright:12px;
-webkit-border-top-right-radius:12px;
border-top-left-radius:12px;
-moz-border-radius-topleft:12px;
-webkit-border-top-left-radius:12px;}
 
li.hcTab.hcTabSelected{ background:#2f6172;}
li.hcTab.hcTabSelected a{color:white; }
li.hcTab a{ text-decoration:none;}
li.hcTab:hover a{color:white}
 
Sample CSS
<div class="accountSettings">
	<ul class="accountMenu">
		<li><a href="#contentContainer">Profile</a></li>
		<li><a href="#formContainer">Password</a></li>
	</ul>
	<div id="contentContainer" >
		<p>Some content</p>
	</div>
	<div id="formContainer">
		<p>Some content</p>
	</div>
</div>
Sample HTML
(function ($) {
    $.fn.hcTabs = function (options) {
        options = $.extend({}, $.fn.hcTabs.options, options);
        var rv = this.each(function () {
            var $this=$(this),
            $tabContent = $('#'+this.childNodes[0].href.split('#')[1])
				.addClass(options.contentClassName);
            $this.addClass(options.tabClassName)
				.click(function(e){
					e.preventDefault();	
					$('.'+options.tabClassName)
						.removeClass(options.selectedClassName);
					$('.'+options.contentClassName)
						.removeClass(options.selectedContentClassName);
					$this.addClass(options.selectedClassName); 
					$tabContent.addClass(options.selectedContentClassName);
				})
        });
        $('.'+options.tabClassName).eq(options.defaultTab).trigger('click');
        return rv;
    };
    $.fn.hcTabs.options = {
		tabClassName:'hcTab',
		contentClassName:'hcTabContent',
		selectedClassName:'hcTabSelected',
		selectedContentClassName:'hcTabContentSelected',
		defaultTab:0
    };
})(jQuery);
This is a simple clean jQuery plugin skeleton for creating tabbed navigation.
You can call it thus:
$('.accountMenu li' ).hCTabs(); 
Reply:
 
 
 
 
rendered @ Thu Jun 20 13:27:20 CEST 2013