publiccms实现多层级选项卡效果

大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂

前言

距离上次更新已经好久了~最近心有余而力不足。。

最近在学习freammarker标签，算是比较老的技术了，白天写，晚上做梦都在写，不吐槽了，反正就是真难用啊，语法还复杂。。

刚刚实现了个多级选项卡的效果，框架使用的是publiccms,不得不说，这个publiccms刚开始用的时候，让你有一万种放弃他的理由，为什么？因为太灵活了，灵活的有点乱了都。不过当你用熟练了之后，发现这个玩意还是挺好用的，既方便又省事，唯一一点不足的就是，内部标签使用的是freammarker……

效果吐下：

实现思路

本来我想用页面片段的方式来实现，后来想了想，页面片段实现的话不灵活，不方便后期维护，但是暂时页面片段是用的最熟练的，换别的方式势必会费脑子不说，还有可能耽误后面的进度，得现学现研究，思虑再三，决定还是换！！！

想要进步，就不能驻足不前，永远都停留在现在的阶段上。

最后决定用分类来实现，将核心企业、股东单位、参股企业以及协作企业都写成可维护的分类，下面的华为、京东等写成内容，这样遍历分类和该分类下的内容即可，后期维护也比较省事。

创建分类

在每个分类下新建该分类的内容，如下所示：

实现代码

最后修改前台代码：(注释只有自己明白……)

  <@_categoryList parentId=3><#assign counts=0> <#list page.list as cate><!-- 遍历分类下的内容 --><div class="content" id="home${counts}" style="margin-top: 50px;"><div class="xiangmu" style="width: 100%;margin-bottom: 50px;max-height: 900px;"><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-tabpage" js-tab="3"style="padding: 0;"><!-- 最上面的三个图片（京东、京东方、华为） --><div class="mt-tabpage-title"><@_contentList categoryId=cate.id   pageSize=3><#list page.list as b><spanclass="col-lg-3 col-md-3 col-sm-3 col-xs-3 mt-tabpage-item mt-tabpage-item-cur tabSpan"style="height: 94px;border: 1px solid #F5F5F5;"><img src="${b.cover!}"></span></#list></@_contentList><span class="mt-tabpage-item" style="display: none;"></span></div><div class="mt-tabpage-count"><ul class="mt-tabpage-cont__wrap"><!-- 京东的介绍 --><@_contentList categoryId=cate.id   pageSize=3><#list page.list as b><li class="mt-tabpage-item"><div class="col-lg-12 col-md-7 col-sm-6 col-xs-5 gtr"style="padding:0px 50px 0px 20px;">${(getContentAttribute(b.id).text?no_esc)!}<div class="col-lg-0 col-md-0 col-sm-0 col-xs-3"style="padding: 0;opacity: 0;">0</div></li></#list></@_contentList><li class="mt-tabpage-item"></li></ul></div></div></div></div><span></span><#assign counts=counts+1> </#list></@_categoryList></@_categoryList>

好了，麻烦的地方就是fremmarker语法，其他的都还行。