Javascript или jQuery передают значения идентификатора, чтобы показать или скрыть выбранный Div

Question

У меня есть таблица, которая обрисована в общих чертах ниже, она генерируется из старого XML-файла с использованием XLST, для стилизации страницы эти файлы "CANT" могут быть изменены мной самостоятельно, но у всех есть общая база шаблонов для них ... и все используют функцию goTab (), чтобы показать или скрыть определенный div

<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>

Если щелкнуть вкладку, она покажет / скроет определенный div, то есть: "divTabControl_1" отображается при нажатии на tab_1, все остальные (может быть разное количество вкладок и делений в каждом файле)

деления кодируются как

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

Я пытаюсь перебрать каждую из них, чтобы найти, какая 'tab_' + tabID была нажата, а затем с помощью этого мне нужно показать или скрыть содержимое div на основе каждого ..

снова я должен сказать, что я не могу редактировать файлы .. Предпочитаю делать это в функции jQuery, но просто не получил понимания jQuery, чтобы сделать это ..

Любая помощь будет великолепна ..

Спасибо

Answer 1

Если я правильно понимаю, вы пытаетесь реализовать функцию goTab. Я прав ? Это то, что вы пытаетесь достичь?

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();
}

РЕДАКТИРОВАТЬ: Вы также можете добавить некоторый код для добавления / удаления класса tab / tab_active для вашей вкладки TD.

Answer 2

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

       previousElem = tabID;
   }