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

dedecms 动态tab写法的更多相关文章

  1. 组件基础之动态tab组件

    <template> <div id="demo31"> <p>-----------------组件基础之动态tab组件一---------- ...

  2. 【ABAP系列】SAP ABAP模块-ABAP动态指针写法的精髓部分

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP模块-ABAP动 ...

  3. Android 动态Tab分页效果实现

    当前项目使用的是TabHost+Activity进行分页,目前要做个报表功能,需要在一个Tab页内进行Activity的切换.比方说我有4个Tab页分别为Tab1,Tab2,Tab3,Tab4,现在的 ...

  4. Android 动态Tab分页效果

    当前项目使用的是TabHost+Activity进行分页,目前要做个报表功能,需要在一个Tab页内进行Activity的切换.比方说我有4 个Tab页分别为Tab1,Tab2,Tab3,Tab4,现在 ...

  5. 动态tab页

    1.前台代码 <%-- builed by manage.aspx.cmt  [ver:2015.25.26] at 2015-06-26 15:25:42 --%> <%@ Pag ...

  6. JS-利用ajax获取json数据,并传入页面生成动态tab

    封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...

  7. Vue之动态class写法总结

    对象方法 最简单的绑定 :class="{ 'active': isActive }" 判断是否绑定一个active :class="{'active':isActive ...

  8. js的动态tab导航

    html部分 <div class="container"> <h3 class="page-header">tab切换</h3& ...

  9. dedecms搜索框写法

    <div class="bg_search"> <form id="forms" name="formsearch" ac ...

随机推荐

  1. 二、AspNet Core添加EF的基本方法(简略版):

    _/\__ ---==/ \\ |. \|\ | ) \\\ \_/ | //|\\ / \\\/\\ 1.在Project.json的dependencies选项中添加以下引用: "Mic ...

  2. 【Spark2.0源码学习】-4.Master启动

         Master作为Endpoint的具体实例,下面我们介绍一下Master启动以及OnStart指令后的相关工作   一.脚本概览      下面是一个举例: /opt/jdk1..0_79/ ...

  3. 基于Activiti的流程应用开发平台JSAAS-WF V5.3

    第1章 产品概述及体系架构 1.1.概述 红迅JSAAS-WF工作流平台V5是广州红迅软件有限公司面向合作伙伴以及有IT运维团队中大型企业提供新一代的流程管理产品,它基于流行的JAVA开源技术上构建, ...

  4. ThinkPHP框架之空控制器

      HOME代表的是模块  前台可以用Home 后台用Admin   Model View Controller  统称为MVC   Model  是数据模型 主要是和数据库打交道的  View代表显 ...

  5. Git下载、更新、提交使用总结

    Git使用总结 1.下载代码到本地 1.1指定存储文件路径 1.运行git-bash.exe 2.指定盘符:cd f:work 1.2下载代码 命令:$ git clone <版本库的网址> ...

  6. javascript 函数和作用域(闭包、作用域)(七)

    一.闭包 JavaScript中允许嵌套函数,允许函数用作数据(可以把函数赋值给变量,存储在对象属性中,存储在数组元素中),并且使用词法作用域,这些因素相互交互,创造了惊人的,强大的闭包效果.[upd ...

  7. 手机共享成wifi热点电脑无法上网的问题

    第二次遇到这样的问题,每次百度都不能解决我遇到的问题.上一次已经自己鼓捣着解决了,后来忘记怎么弄好的.第二次遇到这个问题,又是浪费了许多时间后,偶然弄好了,突然想起来上次就是这样弄好的.所以就针对我自 ...

  8. Hive-1.2.1与HBase-1.1.2的整合

    这里的整合是指,将HBase作为存储数据的库,由Hive作为连接桥梁 修改 Hive hive-site.xml 增加<property> <name>hbase.zookee ...

  9. hadoop进不去web界面

    查看配置文件是否正确:hdfs-site.xml文件 <property> <name>dfs.http.address</name> <value>h ...

  10. Maven学习-Profile详解

    Profile能让你为一个特殊的环境自定义一个特殊的构建:profile使得不同环境间构建的可移植性成为可能.Maven中的profile是一组可选的配置,可以用来设置或者覆盖配置默认值.有了prof ...