大家好，我是雄雄，歡迎關注微信公眾號：雄雄的小課堂

前言

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

最近在學習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語法，其他的都還行。

總結

以上是生活随笔為你收集整理的publiccms实现多层级选项卡效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。