Wednesday, July 18, 2012

Asp.Net jQuery UI Tab Set Active Tab


In this post Asp.Net jQuery UI Tab Set Active Tab we shall see on how to set one of the Tabs as the active tab in the Tabs collection.
 
Add a DIV tag SimpleTab to the page, and add the below jQuery script. Change the references of the jQuery library files to map to your local path. 



Click the Set Active Tab button, notice that the active tab has got changed

<html xmlns="http://www.w3.org/1999/xhtml">
<
head runat="server">
    <
title>jQuery UI Tabs</title>
    <link type="text/css"
href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet" />
    <script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
    <script
type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
    <link
type="text/css"
href="Stylesheet.css" // Add your own .css file (Optional)
rel="Stylesheet" />
    <script type="text/javascript">
$(document).ready(function() {
//
            // Simple Tab
            $("#SimpleTab").tabs({ collapsible: true });
            //
            // Tabs - Set Active Panel
            $('#btnSetActiveTab').click(function(event) {
                event.preventDefault();
                $("#SimpleTab").tabs("option", "selected", 2);
            });
});
    </script>
</head>
<body>
    <form id="frmAccordion" runat="server">
        <table>
<tr valign="top">
                <td>Simple Tab: </td>
                <td>
                    <div id="SimpleTab">
                          <ul>
                                <li><a href="#tab1">Tab-1</a></li>
                                <li><a href="#tab2">Tab-2</a></li>
                                <li><a href="#tab3">Tab-3</a></li>
                          </ul>
                          <div id="tab1">
                                Tab-1 Content goes here.
                          </div>
                          <div id="tab2">
                                Tab-2 Content goes here.
                          </div>
                          <div id="tab3">
                                Tab-3 Content goes here.
                          </div>
                    </div>
                </td>               
            </tr>
            <tr valign="top">
                <td>Tabs - Set Active Tab </td>
                <td>
                    <asp:Button
ID="btnSetActiveTab"
runat="server"
Text="Set Active Tab" />
                </td>               
            </tr>
  </table>
    </form>
</body>

Search Flipkart Products:
Flipkart.com

No comments: