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的动态的选项卡就做好了