Javascript ou jQuery passant les valeurs ID pour afficher ou masquer une div

Question

J'ai un tableau qui est décrit ci-dessous, il est généré à partir d'un ancien fichier XML utilisant XLST, pour le style de la page, ces fichiers "CANT" sont modifiés par moi-même , mais tous ont une base de modèle général pour les ... et tous utilisent la fonction GoTab() pour afficher ou masquer un div spécifique

<table cellspacing="0" cellpadding="0"> 
<tr> 
<td class="tab_active" id="tab_1" onclick="goTab(1)">Key Messages</td> 
<td class="tab" id="tab_2" onclick="goTab(2)">Links</td> 
<td class="tab" id="tab_3" onclick="goTab(3)">Red Flags</td> 
<td class="tab" id="tab_4" onclick="goTab(4)">Referral Pathway</td> 
<td class="tab" id="tab_5" onclick="goTab(5)">Clinical Data</td> 
<td class="tab" id="tab_6" onclick="goTab(6)">Past Medical/Family History</td> 
<td class="tab" id="tab_7" onclick="goTab(7)">Medication</td> 
<td class="tab" id="tab_8" onclick="goTab(8)">Risks/Alerts</td> 
<td class="tab" id="tab_9" onclick="goTab(9)">Demographics</td> 
<td class="tab" id="tab_10" onclick="goTab(10)">Referral</td> 
<td class="tab" id="tab_11" onclick="goTab(11)">Transport</td> 
</tr> 
</table> 

Si un onglet a été cliqué il afficher/masquer un div spécifique à savoir : "divTabControl_1" est affiché si on clique sur tab_1, tout le reste (peut être un nombre différent d'onglets & divs sur chaque fichier)

la divs sont codés comme

<div class="categoryContent" id="divTabControl_1" style="visibility:visible;"> 
content here 
</div> 

Je suis en train de boucler à travers chacun pour trouver onglet « _ » + Tabid a été cliqué, puis en utilisant que je dois afficher ou masquer le contenu div en fonction de chaque ..

encore, je dois dire que je ne peux pas modifier les fichiers .. préfèrent le faire en fonction jQuery, mais tout simplement pas eu la compréhension de jQuery encore le faire ..

Toute aide serait génial ..

Remerciements

Answer 1

Si je comprends bien, vous essayez d'implémenter la fonction goTab. Ai-je raison ? Est-ce ce que vous essayez d'accomplir?

function goTab(index) { 
    // Selector for the div to show (selected by id) 
    visibleDivSelector = "#divTabControl_" + index; 
    // Hide all divs with class "categoryContent" except the one to show 
    $("div.categoryContent:not(" + visibleDivSelector + ")").hide(); 
    // Show selected div 
    $(visibleDivSelector).show(); 
} 

EDIT: Vous pouvez également ajouter un peu de code pour ajouter/supprimer onglet/classe tab_active vous TDs onglet.

Answer 2

var previousElem = ""; 
    function goTab (tabID) 
    { 
     if (previousElem != "") 
     { 
      $("#divTabControl_" + previousElem).css ("visibility" , "hidden"); 
     } 
     $("#divTabControl_" + tabID).css ("visibility" , "visible"); 

     previousElem = tabID; 
    }