The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Use the jQuery UI Tabs widget when you want a set of labeled tabs to show one related content panel at a time. Build the tab list and matching panels in the documented markup, then initialize the widget with .tabs(). You can keep panels in the page or load them remotely, and configure activation, keyboard behavior, disabled tabs, collapsibility, and panel height through the widget’s API.
How to create tabs with jQuery UI
jQuery UI Tabs expects a container with a tab list and one panel for each tab. Each list item contains an anchor. For a panel already in the page, the anchor’s fragment must match that panel’s id.
<div id="tabs">
<ul>
<li><a href="#tab-one">First tab</a></li>
<li><a href="#tab-two">Second tab</a></li>
</ul>
<div id="tab-one">Content for the first tab.</div>
<div id="tab-two">Content for the second tab.</div>
</div>
<script>
$(function () {
$("#tabs").tabs();
});
</script>The list may be ordered or unordered, and panels may be other valid elements; what matters is that each local tab anchor points to its corresponding panel. The widget’s Tabs API documents the markup contract and initialization.
Choose local panels or Ajax-loaded content
Local panels
Use fragment links such as href="#tab-one" when the panel content is already in the document. This is the simplest setup and makes the relationship between each tab and its panel explicit in the markup.
#1 Best Overall
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Remote panels
The widget can also load a panel through Ajax based on the tab anchor’s href. Use a URL for a remote resource instead of a matching in-page fragment. The API provides beforeLoad and load events for this flow; the beforeLoad event lets application code inspect or cancel a request, while load runs after content has loaded. See the official Tabs demo for an Ajax example and the API for the event details.
Set the active tab and whether all tabs can close
The active option uses a zero-based index: 0 selects the first tab, 1 the second, and so on. To allow the currently selected panel to be closed so that none is open, enable collapsible and set active: false.
Rank #2
- JavaScript Jquery
- Introduces core programming concepts in JavaScript and jQuery
- Uses clear descriptions, inspiring examples, and easy-to-follow diagrams
$("#tabs").tabs({
active: 1,
collapsible: true
});With collapsible: true, users can collapse the selected tab; setting active: false at initialization starts with no panel open. The disabled option can disable every tab with true, or disable selected zero-based indexes with an array such as [1, 2].
Choose how tabs activate
Tabs activate on click by default. Set the event option to "mouseover" to activate when the pointer moves over a tab.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
$("#tabs").tabs({
event: "mouseover"
});Activation is not mouse-only: the widget documents keyboard navigation and activation. Arrow keys move among tabs and activate them; Home and End move to the first and last tab; Space and Enter activate the focused tab. The API also documents modified key combinations.
Control panel height and transitions
Panel height
The heightStyle option controls panel sizing:
"content"lets each panel’s height follow its content."auto"sets all panels to the height of the tallest panel."fill"expands panels to fill the height of the tabs container.
$("#tabs").tabs({
heightStyle: "auto"
});Show and hide effects
The widget supports show and hide options for panel transitions. Use them when a transition is useful to your interface; the default is to switch panels without a specified effect. The API describes the available option values and behavior.
React to tab changes in application code
Use beforeActivate when code needs to run immediately before a tab changes; it can cancel activation. Use activate for work that should happen after activation and any animation have completed. The activate event does not fire for the initial tab when the widget is created, so use the create event for initialization-related work.
$("#tabs").tabs({
beforeActivate: function (event, ui) {
// Return false to cancel the activation.
},
activate: function (event, ui) {
// Runs after a tab has been activated.
},
create: function (event, ui) {
// Runs when the widget is created.
}
});For Ajax-loaded tabs, use the separate beforeLoad and load events rather than treating them as activation events. Their timing and parameters are documented in the Tabs API.
Best Value
Update tabs after changing the DOM
If application code adds or removes tab markup directly in the DOM, call the widget’s refresh() method so it processes the changed tabs and recomputes panel heights.
$("#tabs").tabs("refresh");Check the jQuery UI version in your project
jQuery UI publishes versioned API references, including the 1.11 Tabs API and 1.10 Tabs API. Match the documentation to the jQuery UI version installed in your project before relying on an option, method, or event. The assets loaded by the official demo are jQuery 3.7.1 and jQuery UI 1.14.2; that describes the demo, not a compatibility guarantee for a different application. The demo page also provides examples of collapsible, mouseover, Ajax, sortable, manipulation, and vertical tabs.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
