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:
You can call it thus:
$('.accountMenu li' ).hCTabs();