For the longest time I used the Adobe SPRY assets to build my tabs. But I found it really hard to make it go back to the original tab that was selected.
In more recent projects, I find myself using jQuery every project. So instead of adding 3-4 files from the SPRY assets to make the tabs work, I wrote my own little tabs script.
It uses the standard jQuery selection features and is geared for only ONE tabbed panel.
<asp:TextBox runat="server" ID="hdnSelectedTab" Value="1" />
<div class="TabContainer">
<div class="TabList">
<div class="TabItem" id="tab1">
My Profile
</div>
<div class="TabItem" id="tab2">
Public Profile
</div>
<div class="TabItem" id="tab3">
Firm Information
</div>
</div>
<div class="TabContentList">
<div class="TabContent" id="content1">
</div>
<div class="TabContent" id="content2">
</div>
<div class="TabContent" id="content3">
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
var HiddenFieldID = "<%=hdnSelectedTab.ClientID %>";
$(document).ready(function () {
$(".TabItem").removeClass("SelectedTab");
$(".TabContent").hide();
var SelectedIndex = $("#" + HiddenFieldID).val();
$("#tab" + SelectedIndex).show();
$("#content" + SelectedIndex).show();
$(".TabItem").click(function () {
$(".TabItem").removeClass("SelectedTab");
$(".TabContent").hide();
var SelectedIndex = $(this).attr("id").toString().replace("tab", "");
$("#tab" + SelectedIndex).addClass("SelectedTab");
$("#content" + SelectedIndex).show();
$("#" + HiddenFieldID).val(SelectedIndex);
});
});
</script>
Future extension for multiple tab groups coming soon.
Thank You