How to add a tab control in asp .net page using jQuery?

Posted by Pgayath under jQuery category on 9/22/2012 | Points: 40 | Views : 6079

Post Code |

Search Codes |

Code Home

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>JQuery Demo</title> 
       <link href="jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />                  
                  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> 
                  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script> 

                  <script type="text/javascript"> 
                        $(function() { 
                              $("#tabContainer").tabs();  
                        }); 
                  </script>

</head> 
<body> 
    <form id="form1" runat="server"> 
    <div id="tabContainer"> 
       <ul> 
         <li><a href="#tab0"><span>FIRST</span></a></li> 
         <li><a href="#tab1"><span>SECOND</span></a></li> 
         <li><a href="#tab2"><span>THIRD</span></a></li> 
       </ul> 

       <div id="tab0" > 
               <asp:Button ID="Button1" runat="server" 
                           Text="First Tab Button" /> 
       </div> 
       <div id="tab1"> 
               <asp:Button ID="Button2" runat="server" 
                           Text="Second Tab Button" /> 
       </div> 
       <div id="tab2"> 
               <asp:Button ID="Button3" runat="server" 
                           Text="Third Tab Button" /> 
       </div> 
    </div> 
    </form> 
</body> 
</html>

Alert Moderator

Bookmark It

Comments or Responses

Posted by: Kumaran1987 on: 2/12/2013 Level:Starter | Status: [Member] | Points: 10

see this link http://www.kumaran198726.com/2013/02/how-to-maintain-or-retain-tabs-in-same.html

Here I've used in same Tab;

But you will change it Code behind ; because I have used Enum operations to make a tab positions in default.aspx.cs page

so hopefully you can change Enum values as according to your requirements

Latest Code Snipptes