jQuery使用多个选项卡组
jQuery使用多个选项卡组
提问于 2012-06-19 02:43:06
我有一个包含多个选项卡的页面。但是如果你在Chrome中复制/粘贴代码和视图，你就会明白我在说什么。当页面加载时，我希望显示与管理角色相对应的选项卡。然后，当用户单击Manage Roles-Person Associations或Manage Application-Data Package Associations时，我希望显示相应的选项卡。
以下是我到目前为止使用的代码。我遇到的问题是，当我单击左边的链接时，页面会返回到Manage Roles选项卡，这是我完全理解的，因为我已经在$(document).ready函数中编写了所有代码。但是我不知道如何让它以我想要的方式工作。任何帮助都将不胜感激。
<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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-06-19 02:50:27
最有可能的答案是从点击处理程序返回false：
$('#sManageRoles').click(function () {
$('#divRolesTabs').tabs();
$('#divRolesTabs').show();
$('#divRolesPersonsAssociations').hide();
$("#divManageApplicationDataPackageAssociation").hide();
return false;
});当你没有从click处理程序返回'false‘时，默认的锚标签功能就会生效，这意味着(因为你没有指定href)页面会被重新加载。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11089048
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号