Implement Jquery Tab Using Jquery UI With Example

For More Videos Visit Our YouTube Channel

Jquery Tab Using Jquery UI - Step 1

First of all, add Jquery min file and Jquery UI as reference to your Solution and page.

1. Refer Jquery Min File From Here,

2. Refer Jquery UI File From Here

And then add following style sheet from Jquery UI.

3. Refer Jquery Tab Style Sheet From Here




Jquery Tab Using Jquery UI - Step 2

Second place a div inside your form and give an ID as MainTab. Now, how many tabs you need. Let it be three. Make three div inside this MainTab Div. Let each div have ID as follows. FirstTab, SecondTab, ThirdTab.



Next place an Un-ordered List inside this MainTab Div. Inside Un-ordered List, place name of tabs as link list. Let the first link will have navigation URL to FirstTab. Second link will have navigation URL to SecondTab. Third link will have navigation URL to ThirdTab.


Jquery Tab Using Jquery UI - Step 3

Third, inside document.ready, we make use of Jquery tabs. Place code for Jquery Tabs as follows. The MainDiv will be used here for Jquery tabs.

$(function() {
          $( "#MainTab" ).tabs();
});




That's all, if you run the application, you can see the Jquery Tabs on the Browser.