JavaScript编程实现tab选项卡切换的效果+1
2023-04-12
之前在“圳品”信息系统使用了tab选项卡来显示信息，详见：
JavaScript编程实现tab选项卡切换的效果
在tab选项卡中使用其它
来显示信息就出现了问题，乱套了，比如下面的这段代码：
“圳品”信息系统
JavaScript编程实现tab选项卡切换的效果 @Edge浏览器
- 清单
- 区域分布分析
- 产品类别分析
符合条件的产品清单
选项卡1
区域分布分析
选项卡2
产品类别分析
选项卡3
运行效果如下：
可以看到，第1张选项卡中的
选项卡1消失了，而第2张和第3张选项卡的内容对调了。
导致问题的原因在于activeTab()函数中，根据函数参数a传递进来的活动选项卡的indax，默认为选项卡组中的每个项目卡里一对
的的index是相同的，即第a个对默认匹配第a个，并将第a个和第a个设置为当前活动选项卡：
oTabLis[a].className = "show";
oTabDivs[a].className = "";
在选项卡组中的
与数量相同时，这样默认是可以的，如 区域分布分析 与匹配，这也是JavaScript编程实现tab选项卡切换的效果可以正常工作的原因。
但我们在选项卡组的
内引入其它的，比如上面代码中的：
符合条件的产品清单
选项卡1
这时选项卡组中的
数量大于数量时，第a个 对匹配第a个的这种默认关系就不一定准确了。在上面的演示代码中，第2个选项卡中的（即 区域分布分析 ）将会与第2个（即选项卡1）匹配，而不是与第3个（即）匹配。
找到了原因后，就要想解决问题的办法。解决问题的关键是在进行选项卡切换时如何找到或确定与选项卡组中的与
匹配的。
解决这个问题的方法有很多，最直接的办法是定义一个全局的二维数组，把每个选项卡中的
和与之匹配的的id保存下来，再用一个全局变量来存放当前活动选项卡的index。但是这样做的话，使用全局变量太多，耦合度低，不够通用。
我使用的解决办法是，先为选项卡中与
匹配的设置一个特定的id特征码，比如id都是以"ZpDiv"来开头，然后遍历选项卡中的，并把id中具有id特征码的筛选出来,将其id值保存在一维数组aDivs中，这样第i个就与aDivs[i]存储的id所指向的匹配，然后可以进行相应的操作了。
如果我们在activeTab()中实现上述遍历、筛选和匹配工作的话，每次选项卡切换都要重复进行一次，不划算。
如果我们在选项卡组初始化阶段initTab()完成实现上述遍历、筛选和匹配工作，再把这种匹配关系传递到activeTab()中，就方便多了。
那么如何把这种匹配关系传递到activeTab()中呢？
既然我们先前是通过给选择卡的
增加index属性来确定当前活动选项卡的，那么我们再给 再增加两个属性，一个是.linkedDivID用来存与它匹配的的id，另一个是.TabsID ，用来保存所在选项卡组的id。
具体实现起来，我使用的解决办法是，分三步：
第一步，为选项卡中与
匹配的设置一个特定的id特征码，比如id都是以"ZpDiv"来开头。
第二步，在选项卡组初始化阶段initTab()，我们先遍历选项卡中的
，并把id中具有id特征码的筛选出来，将其id值保存在一个一维数组aDivs中；然后遍历选项卡中的，为每个 增加index、.linkedDivID和.TabsID属性并赋值，并把TabsID和index属性作为参数传递给activeTab(tabsId, a)。
第三步，在activeTab(tabsId, a)中，先根据tabsId建立选项卡中的
数组oTabLis，然后遍历 数组oTabLis，将所有的选项卡设置为非活动状态，接着修改oTabLis[a]的className，把它设置为活动选项卡的 ，最后修改oTabLis[a].linkedDivID指向的的ClassName，把它设置为活动选项卡的。
完整的代码如下，其中增加了一个