Menu
I have a page with multiple tabs. But if you copy/paste the code and view in Chrome, you'll understand exactly what I am talking about. When the page loads, I'd want to show the tabs which correspond to [Manage Roles]. Then when the user clicks on the [Manage Roles-Person Associations] or [Manage Application-Data Package Association], I'd want to display the corresponding tabs.
The following is the code which I've used so far. The problem that I come across is that when I click on the link on the left, the page is reverted back to the [Manage Roles] tabs which I completely understand since I've coded everything in the $(document).ready function. But I can't figure out how to get it to work the way I want it to work. Any help will be greatly appreciated.
<body>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#divRolesTabs').tabs();
$('#divRolesPersonsAssociations').hide();
$('#divManageApplicationDataPackageAssociation').hide();
$('#sManageRoles').click(function () {
$('#divRolesTabs').tabs();
$('#divRolesTabs').show();
$('#divRolesPersonsAssociations').hide();
$("#divManageApplicationDataPackageAssociation").hide();
});
$('#sManageRolesPersonAssociation').click(function () {
$('#divRolesPersonsAssociations').show();
$('#divRolesPersonsAssociations').tabs();
$('#divRolesPersonsAssociations').focus();
$('#divRolesTabs').hide();
$("#divManageApplicationDataPackageAssociation").hide();
});
$('#sManageApplicationDataPackageAssociation').click(function () {
$("#divManageApplicationDataPackageAssociation").show();
$("#divManageApplicationDataPackageAssociation").tabs();
$('#divRolesTabs').hide();
$('#divRolesPersonsAssociations').hide();
});
});
</script>
<form id="frmAdminView" runat="server">
<table>
<tr>
<td>
<div id="divNavigationPane">
<ul>
<li><a href=""><span id="sManageRoles">Manage Roles</span></a></li>
<li><a href=""><span id="sManageRolesPersonAssociation">Manage Roles-Person Associations</span></a></li>
<li><a href=""><span id="sManageApplicationDataPackageAssociation">Manage Application-Data Package Associations</span></a></li>
</ul>
</div>
</td>
<td>
<div id="divRolesTabs">
<ul>
<li><a href="#divAddRoles"><span>Add Roles</span></a></li>
<li><a href="#divDeleteRoles"><span>Delete Roles</span></a></li>
<li><a href="#divChangeRoles"><span>Change Roles</span></a></li>
</ul>
<div id="divAddRoles">
<p>Add Roles</p>
</div>
<div id="divDeleteRoles">
<p>Delete Roles</p>
</div>
<div id="divChangeRoles">
<p>Change Roles</p>
</div>
</div>
<div id="divRolesPersonsAssociations">
<ul>
<li><a href="#divAssignRoles"><span>Add Roles</span></a></li>
<li><a href="#divDeleteRoleAssociations"><span>Delete Roles</span></a></li>
</ul>
<div id="divAssignRoles">
<p>Assign Roles to persons</p>
</div>
<div id="divDeleteRoleAssociations">
<p>Delete Role Associations</p>
</div>
</div>
<div id="divManageApplicationDataPackageAssociation">
<ul>
<li><a href="#divAddApplications"><span>Add Applications</span></a></li>
<li><a href="#divAddDataPackage"><span>Add Data Package</span></a></li>
<li><a href="#divAddApplicationDataPackageAssociations"><span>Add Application/Data Package</span></a></li>
</ul>
<div id="divAddApplications">
<p>Add Applications</p>
</div>
<div id="divAddDataPackage">
<p>Add Data Packages</p>
</div>
<div id="divAddApplicationDataPackageAssociations">
<p>Add App Data Package Association</p>
</div>
</div>
</td>
</tr>
</table>
</form>
990
asked Nov 26 '25 13:11
Most likely the answer is to return false from your click handlers:
$('#sManageRoles').click(function () {
$('#divRolesTabs').tabs();
$('#divRolesTabs').show();
$('#divRolesPersonsAssociations').hide();
$("#divManageApplicationDataPackageAssociation").hide();
return false;
});
When you don't return 'false' from the click handler, the default anchor tag functionality kicks in which means (since you haven't specified an href) the page is reloaded.
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
