jQuery tabs: Create HTML tabs using jQuery UI
HTML Tabs have became one of the most used UI components in web design. Tabs are generally used to break content into multiple sections that can be swapped to save space. Different implementation of HTML Tabs are available and jQuery UI is one of the simplest one. For adding jQuery tabs in your HTML page, first you have to make sure that you included the theme css file properly in html. If themes css is not set properly, jQuery tabs will not be rendered properly. Next, include the jQuery javascript in your HTML page. And create your HTML file which contains the tab code. Create your tabs by adding following unordered list in the DIV. 
<ul>
 <li><a href="#firstTab">First</a></li>
 <li><a href="#secondTab">Second</a></li>
 <li><a href="#thirdTab">Third</a></li>
 <li><a href="#forthTab">Forth</a></li>
</ul>

Code language: HTML, XML (xml)
In the above code, we created tabs labels. Note href=”#id”, this points to the id of DIV which contains the tab content. 
<div id="firstTab">first content</div>
<div id="secondTab">second content</div>
<div id="thirdTab">Third content</div>
<div id="forthTab">Forth content</div>

Code language: HTML, XML (xml)
Next, we need to initialize the tabs. For that add following code at the end of HTML file. 
$(document).ready(function() {
 $("#tabs").tabs();
});

Code language: JavaScript (javascript)
Note that our tabs are encapsulated in a DIV tag with id tabs.

Tab Events in jQuery

A series of events fire when interacting with a tabs interface: * tabsselect, tabsload, tabsshow (in that order) * tabsadd, tabsremove * tabsenable, tabsdisable 
$('#tabs').bind('tabsselect', function(event, ui) {
  // Objects available in the function context:
 alert(ui.tab);     // anchor element of the selected (clicked) tab
 alert(ui.panel);   // element, that contains the selected/clicked tab contents
 alert(ui.index);   // zero-based index of the selected (clicked) tab

});

Code language: JavaScript (javascript)
Note that if a handler for the tabsselect event returns false, the clicked tab will not become selected (useful for example if switching to the next tab requires a form validation).

Lazy loading tab using AJAX

Tabs supports loading tab content via Ajax in an unobtrusive manner. The HTML you need is slightly different from the one that is used for static tabs: A list of links pointing to existing resources (from where the content gets loaded) and no additional containers at all (unobtrusive!). The containers’ markup is going to be created on the fly: 
<div id="example">
     <ul>
         <li><a href="sample_1.html"><span>Content 1</span></a></li>
         <li><a href="sample_2.html"><span>Content 2</span></a></li>
         <li><a href="sample_3.html"><span>Content 3</span></a></li>
     </ul>
</div>

Code language: HTML, XML (xml)
Lot of other features are available for creating/manipulating html tabs in jQuery. Refer http://docs.jquery.com/UI/Tabs for more details.

View Comments

Leave a Comment
Share
Published by
Viral Patel
Tags: JavaScript javascript framework JQuery jquery ui tutorial
16 years ago

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

4 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

4 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

4 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

4 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

4 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

5 years ago