/** * jQuery-ui-tab-utils - Utilities to help with the jquery UI tab control * Date: 08/20/2013 * @author Kyle White - [email protected] * @version 0.1 * Built for and tested with jQuery UI 1.9.2 * License: Use at your own risk and feel free to use this however you want. * * USAGE: * $('MyTabSelector').disableTab(0); // Disables the first tab * $('MyTabSelector').disableTab(1, true); // Disables & hides the second tab * $('MyTabSelector').enableTab(1); // Enables & shows the second tab * * For the hide option to work, you need to define the following css * li.ui-state-default.ui-state-hidden[role=tab]:not(.ui-tabs-active) { * display: none; * } */ (function ($) { $.fn.disableTab = function (tabIndex, hide) { // Get the array of disabled tabs, if any var disabledTabs = this.tabs("option", "disabled"); if ($.isArray(disabledTabs)) { var pos = $.inArray(tabIndex, disabledTabs); if (pos < 0) { disabledTabs.push(tabIndex); } } else { disabledTabs = [tabIndex]; } this.tabs("option", "disabled", disabledTabs); if (hide === true) { $(this).find('li:eq(' + tabIndex + ')').addClass('ui-state-hidden'); } // Enable chaining return this; }; $.fn.enableTab = function (tabIndex) { $(this).find('li:eq(' + tabIndex + ')').removeClass('ui-state-hidden'); this.tabs("enable", tabIndex); return this; /* Old way, not really necessary // Get the array of disabled tabs, if any var disabledTabs = this.tabs("option", "disabled"); var pos = $.inArray(tabIndex, disabledTabs); // If the tab we want is in the disabled list, remove it if (pos > -1) { disabledTabs.splice(pos); // Remove the hidden class just in case $(this).find('li:eq(' + tabIndex + ')').removeClass('ui-state-hidden'); // Set the list of disabled tabs, without the one we just enabled this.tabs("option", "disabled", disabledTabs); } // Enable chaining return this; */ }; })(jQuery); $('#MyTabSelector').tabs();
<div id='MyTabSelector'> <ul> <li><a href="#tabs-1">Tab 0</a></li> <li><a href="#tabs-2">Tab 1</a></li> <li><a href="#tabs-3">Tab 2</a></li> </ul> <div id="tabs-1"> <a href="#" onclick="$('#MyTabSelector').disableTab(1);">Disable Tab 1</a><br /> <a href="#" onclick="$('#MyTabSelector').disableTab(1, true);">Hide Tab 1</a> <br /> <a href="#" onclick="$('#MyTabSelector').enableTab(1);">Show/Enable Tab 1</a> </div> <div id="tabs-2"> <p>Why is everyone hiding and disabling me?</p> </div> <div id="tabs-3"> <p>Tab 2 content</p> </div> </div>
/* Comment this rule out to see what happens if you forget to define it (hide wont work) */ li.ui-state-default.ui-state-hidden[role=tab]:not(.ui-tabs-active) { display: none; }