Question

我有一个表格，如下所示，这是使用XLST从一个旧的XML文件生成的，为页面设置样式，这些文件“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被编码为

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

编辑：您可能还想添加一些代码来向标签TD添加/删除tab / tab_active类。

Answer 2

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

       previousElem = tabID;
   }

Javascript或jQuery传递ID值以显示或隐藏选定的Div

2 个答案: