jQuery與多個選項卡組一起工作

我有一個包含多個選項卡的頁面。但是，如果您在Chrome中複製/粘貼代碼和視圖，您將完全明白我在說什麼。加載頁面時，我想顯示與[管理角色]對應的選項卡。然後，當用戶點擊[管理角色 - 人員關聯]或[管理應用程序數據包關聯]時，我想顯示相應的選項卡。jQuery與多個選項卡組一起工作

以下是我到目前爲止使用的代碼。我碰到的問題是，當我點擊左側的鏈接時，頁面被還原爲[管理角色]選項卡，因爲我已經編碼了$（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>

來源

2012-06-18 Abhisheik Deo

最有可能的答案是從你的點擊處理程序返回false：

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

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

    return false; 
});

如果不從點擊的處理器返回「假」，默認的錨標記功能在這意味着踢（因爲你沒有指定一個href）頁面重新加載。

來源

2012-06-18 18:50:26 awbergs

非常感謝主席先生。它像一個魅力！ –

jQuery與多個選項卡組一起工作

回答

相關問題