Implement Jquery Tab Using Jquery UI With Example
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
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.
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.