Now you have all the script files. You can start the work. Here we will see simple and collapsible tabs. So let's start.
Step 1:
First start a new MVC web application project and add a controller with an Index action and add the view associated with the Index action.
Step 2:
First in your view refer to the given js files and CSS in <head>section</head> like below.
<link rel="stylesheet" href="../../Content/themes/base/jquery.ui.all.css">
<script src="../../Scripts/jquery-1.7.1.js"></script>
<script src="../../Scripts/jquery.ui.core.js"></script>
<script src="../../Scripts/jquery.ui.widget.js"></script>
<script src="../../Scripts/jquery.ui.tabs.js"></script>
<link rel="stylesheet" href="../../Content/themes/base/demos.css">
<script>
$(function () { $("#tabs").tabs(); });
</script>
In the above line of code we only refer to the CSS and js files of the j-query UI with one script to pass the tab id to the tabs. The js file functions which will make our <div> as tab. The above tab is a simple tab; you can create it as collapsible by passing the collapsible=true property in the above script.
Step 3:
Now we need to create one tab which has an id as tabs and contains subtabs elements so create it like below.
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab One</a></li>
<li><a href="#tabs-2">Tab Two</a></li>
<li><a href="#tabs-3">Tab Three</a></li>
</ul>
<div id="tabs-1">
<p>Tab One Content Here.</p>
</div>
<div id="tabs-2">
<p>Tab Two Contents Here</p>
</div>
<div id="tabs-3">
<p>Tab Three Contents Here.</p>
</div>
</div>
In the above line of code we create our main div which will contain sub divs to display the tab content as well you can see we have given an anchor tag to refer to the sub tabs on the top.
Step 4:
That's it; we have created our tabs. Now just run your application and see the result.
Conclusion
Using J-query we are able to create tabs for our ASP.NET MVC application.