dedecms 动态tab写法

项目要求要dedecms动态添加选项卡然后自己写了一个

 

现在需要些tab的栏目下创建子栏目 （如果是首页需要顶级栏目）

 

如图我在案例下添加了3个子栏目

然后每个子栏目里面添加需要在tab里面输出的内容

然后在栏目模板中添加代码如下

{dede:channel type='son' row='10' currentstyle="<li class='active' role='presentation' ><a href='~typelink~' ~rel~ role='tab' data-toggle='tab'>~typename~</a></li>"}
<li><a href='[field:typeurl/]' [field:rel/]>[field:typename/]</a></li>
{/dede:channel}

这段代码 是查询栏目 其中 type=‘son’ 代表的就是栏目下的子栏目

因为这些栏目会生成htm页面，所以每个teb标签都是一个页面。

 

具体位置就是你teb标题的位置如图

下面就是teb选项卡中内容的显示了代码如下

{dede:list pagesize='6'}
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="ind_thum">
                        <a href="[field:arcurl/]" target="_blank"><img src="[field:litpic/]" alt="[field:title/]" class="img-responsive"></a>
                        <h3 class="text-center"><a href="[field:arcurl/]" target="_blank">[field:title/]</a></h3>
                    </div>
                </div>
                {/dede:list}

完整的teb选项卡每一项动态添加内容如下图

完整的代码如下

<ul role="tablist" id="myTab">  
      {dede:channel type='son' row='10' currentstyle="<li class='active' role='presentation' ><a href='~typelink~' ~rel~ role='tab' data-toggle='tab'>~typename~</a></li>"}
                <li><a href='[field:typeurl/]' [field:rel/]>[field:typename/]</a></li>
                {/dede:channel}
    </ul>    
    <!--tab-content start-->
    <div class="tab-content">
        <!--tab-pane start-->
      <div role="tabpanel" class="tab-pane fade in active" id="vall">          
          <div class="row">
            {dede:list pagesize='6'}
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="ind_thum">
                        <a href="[field:arcurl/]" target="_blank"><img src="[field:litpic/]" alt="[field:title/]" class="img-responsive"></a>
                        <h3 class="text-center"><a href="[field:arcurl/]" target="_blank">[field:title/]</a></h3>
                    </div>
                </div>
                {/dede:list}
        </div>
            <div class="dede_pages">
              <ul class="pagelist">
                {dede:pagelist listitem="index,end,pageno,pre,next" listsize="1"/}
              </ul>
            </div> 
      </div>
        <!--tab-pane end-->              
        <!--tab-pane start-->   

 完整的样式：

 

 

好了  一个dedecms的动态的选项卡就做好了