http://example.com/style.css X#itptabmenu-wrap { width:440px; margin:0px auto; } h1 { font:bold 40px Sans-Serif; margin:0 0 20px 0; } .hide { position:absolute; top:-9999px; left:-9999px; } #itptabmenu { background:#eee; padding:10px; margin:0 0 20px 0; -moz-box-shadow:0 0 5px #666; -webkit-box-shadow:0 0 5px #666; } #itptabmenu .nav { overflow:hidden; margin:0 0 10px 0; } #itptabmenu .nav li { width:97px; float:left; margin:0 10px 0 0; } #itptabmenu .nav li.last { margin-right:0; } #itptabmenu .nav li a { display:block; padding:5px; background:#959290; color:white; font-size:10px; text-align:center; border:0; } #itptabmenu .nav li a:hover { background-color:#111; } #itptabmenu ul { list-style:none; } #itptabmenu ul li a { display:block; border-bottom:1px solid #666; padding:4px; color:#666; } #itptabmenu ul li a:hover { background:#fe4902; color:white; } #itptabmenu ul li:last-child a { border:none; } #itptabmenu ul li.itptabmenu-one a.current, #itptabmenu ul.featured li a:hover { background-color:#0575f4; color:white; } #itptabmenu ul li.itptabmenu-two a.current, #itptabmenu ul.core li a:hover { background-color:#d30000; color:white; } #itptabmenu ul li.itptabmenu-three a.current, #itptabmenu ul.jquerytuts li a:hover { background-color:#8d01b0; color:white; } #itptabmenu ul li.nav-four a.current, #itptabmenu ul.classics li a:hover { background-color:#FE4902; color:white; }http://example.com/script.js X(function($) { $.organicTabs = function(el, options) { var base = this; base.$el = $(el); base.$nav = base.$el.find(".nav"); base.init = function() { base.options = $.extend({},$.organicTabs.defaultOptions, options); // Accessible hiding fix $(".hide").css({ "position": "relative", "top": 0, "left": 0, "display": "none" }); base.$nav.on("click", "li > a", function() { // Figure out current list via CSS class var curList = base.$el.find("a.current").attr("href").substring(1), // List moving to $newList = $(this), // Figure out ID of new list listID = $newList.attr("href").substring(1), // Set outer wrapper height to (static) height of current inner list $allListWrap = base.$el.find(".list-wrap"), curListHeight = $allListWrap.height(); $allListWrap.height(curListHeight); if ((listID != curList) && ( base.$el.find(":animated").length == 0)) { // Fade out current list base.$el.find("#"+curList).fadeOut(base.options.speed, function() { // Fade in new list on callback base.$el.find("#"+listID).fadeIn(base.options.speed); // Adjust outer wrapper to fit new list snuggly var newHeight = base.$el.find("#"+listID).height(); $allListWrap.animate({ height: newHeight }); // Remove highlighting - Add to just-clicked tab base.$el.find(".nav li a").removeClass("current"); $newList.addClass("current"); }); } // Don't behave like a regular link // Stop propegation and bubbling return false; }); }; base.init(); }; $.organicTabs.defaultOptions = { "speed": 300 }; $.fn.organicTabs = function(options) { return this.each(function() { (new $.organicTabs(this, options)); }); }; })(jQuery); $(function() { $("#itptabmenu").organicTabs(); }); CSS 3 Label jQuery Tab Menu jQuery 1 Tab Menu jQuery 1 Tab Menu jQuery 1 Tab Menu jQuery 1 Tab Menu jQuery 1 Tab Menu jQuery 1 Tab Menu jQuery 1 Tab Menu jQuery 2 Tab Menu jQuery 2 Tab Menu jQuery 2 Tab Menu jQuery 2 Tab Menu jQuery 2 Tab Menu jQuery 2 Tab Menu jQuery 2 Tab Menu jQuery 3 Tab Menu jQuery 3 Tab Menu jQuery 3 Tab Menu jQuery 3 Tab Menu jQuery 3 Tab Menu jQuery 3 Tab Menu jQuery 3