问个数据循环输出的问题

Question

前端有个栏目TAB切换效果，使用JQ的一个插件做的。代码如下：

<div class="slideTxtBox">
                <div class="hd">
                    <ul>
                        <li>学校动态</li><!---TAB标题1--->
                        <li>学生动态</li><!---TAB标题2--->
                    </ul>
                </div>
                <div class="bd">
                    <ul><!---TAB标题1内容块--->
                        <li><a href="/cms/a/56842.html" target="_blank">工业学校12月份绩效考核成绩通报</a><span>01-08</span></li>  
                        <li><a href="/cms/a/56842.html" target="_blank">工业学校12月份绩效考核成绩通报</a><span>01-08</span></li>  
                        <li><a href="/cms/a/56842.html" target="_blank">工业学校12月份绩效考核成绩通报</a><span>01-08</span></li>  
                        <li><a href="/cms/a/56842.html" target="_blank">工业学校12月份绩效考核成绩通报</a><span>01-08</span></li>  
                        <li><a href="/cms/a/56842.html" target="_blank">工业学校12月份绩效考核成绩通报</a><span>01-08</span></li>  
                    </ul>
                    <ul><!---TAB标题2内容块--->
                        <li><a href="/cms/a/56842.html" target="_blank">工业学校12月份绩效考核成绩通报</a><span>01-08</span></li>  
                        <li><a href="/cms/a/56842.html" target="_blank">工业学校12月份绩效考核成绩通报</a><span>01-08</span></li>  
                        <li><a href="/cms/a/56842.html" target="_blank">工业学校12月份绩效考核成绩通报</a><span>01-08</span></li>  
                        <li><a href="/cms/a/56842.html" target="_blank">工业学校12月份绩效考核成绩通报</a><span>01-08</span></li>  
                        <li><a href="/cms/a/56842.html" target="_blank">工业学校12月份绩效考核成绩通报</a><span>01-08</span></li>  
                    </ul>
                </div>
            </div>

TP5模板中使用volist去循环数据，本来是一个TAB标题对应一个TAB内容块。这样一个个的循环下去就OK了

问题是：现在要先输出两个TAB标题然后再输出这两个的TAB内容块，如果就这两个TAB倒是好办，做两个循环前面一个显示出标题，后面一个显示内容块。现在我这个网站有N个栏目，需要在首页上自动循环输出这些栏目，并且两个栏目形成一个TAB切换效果。

有啥好办法？

Answer 1

Tab的切换你是用的jq插件做的，那你的html结构就按照你所给的代码渲染出来，插件应该是支持做到切换后显示对应的内容。你现在是N个栏目循环最后渲染出的html结构，点击切换插件不能做到一一对应显示吗？如果不是这个问题，目前就还不太明白问题难点在哪？