In this post Asp.Net jQuery UI Tab Get Active Tab we
shall see on how to get the index of 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 Get Active Tab button, notice that the index of the active tab is displayed in a message box.
<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 -
Get Active Panel
$('#btnGetActiveTab').click(function(event)
{
event.preventDefault();
alert($("#SimpleTab").tabs("option", "selected"));
});
});
</script>
</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 - Get Active Tab </td>
<td>
<asp:Button
ID="btnGetActiveTab"
runat="server"
Text="Get Active Tab" />
</td>
</tr>
</table>
</form>
</body>
</html>
Related Posts
No comments:
Post a Comment