3

我有一个包含多个选项卡的页面。但是如果你复制/粘贴代码并在 Chrome 中查看，你就会明白我在说什么。当页面加载时，我想显示对应于 [管理角色] 的选项卡。然后，当用户单击 [管理角色-人员关联] 或 [管理应用程序-数据包关联] 时，我想显示相应的选项卡。

以下是我到目前为止使用的代码。我遇到的问题是，当我单击左侧的链接时，页面会返回到我完全理解的 [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>

4

1 回答 1

2

最有可能的答案是从您的点击处理程序返回 false：

$('#sManageRoles').click(function () {
    $('#divRolesTabs').tabs();
    $('#divRolesTabs').show();

    $('#divRolesPersonsAssociations').hide();
    $("#divManageApplicationDataPackageAssociation").hide();

    return false;
});

当您不从单击处理程序返回“false”时，默认锚标记功能将启动，这意味着（因为您没有指定 href）页面被重新加载。

于 2012-06-18T18:50:26.800 回答