欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。 网站托管 桌面收藏 网站定制

361源码网

当前位置:361源码网 > 技术文档 > 网站技巧 > 织梦dedeCMS标签循环中判断第一个元素添加样式效果实现办法

织梦dedeCMS标签循环中判断第一个元素添加样式效果实现办法

2018-06-14    361源码网     361源码         我要收藏     在百度搜索相关内容
这篇文章主要为大家详细介绍了织梦dedeCMS标签循环中判断第一个元素添加样式效果实现办法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

在浏览织梦制作的网站时,我们经常会看到这样的一种效果就是几个循环的调用显示的文章第一条记录和后面几条记录的样式不一样,这也就是今天361模板想给大家介绍的:织梦dedeCMS标签循环中判断第一个元素添加样式效果实现办法。

织梦dedeCMS标签循环中判断第一个元素添加样式效果实现办法

这种效果要求DEDECMS有规律的列表输出LI标签,然后应用相应的CSS样式。我们可以使用以下的参数:

[field:global name=autoindex runphp="yes"]if(@me%2==0)@me=" class=\"mar20\">";else @me=">";[/field:global]

这个参数可以加在调用的任何一个地方,控制CSS的输出,不仅可以应用于arclist,还可以应用于list,写法都是一样的。

一、应用于arclist

{dede:arclist typeid='23' limit='0,10' titlelen='28'}
<dl[field:global name=autoindex runphp="yes"]if(@me%2==0)@me=" class=\"mar20\">";else @me=">";[/field:global]
<dt>·[field:title/]</dt>
<dd>[field:pubdate function='MyDate("Y-m-d",@me)'/]</dd>
</dl>
{/dede:arclist}

二、应用于list

{dede:list pagesize='36'}
<dl><dt><img src="/img/lby_06.jpg" width="9" height="9" /> [field:title/]</dt>
<dd>[field:pubdate function="GetDateMK(@me)"/]</dd></dl>
[field:global name=autoindex runphp="yes"](@me%6)? @me="":@me="</div><div class=\"lby1_3\">";[/field:global]
{/dede:list}

三、扩展应用——通过CSS方式实现不同样式效果

以上是通过dedecms的代码的方式来控制不同的标签应用不同的样式,还可以直接在CSS中使用CSS选择器来控制子元素。

E:nth-child(even){color:#69c}

写法如下:

{dede:arclist row='3' typeid='9'}
<div class="item [field:global name=autoindex runphp='yes'](@me==1)? @me='active':@me='';[/field:global]">
    <a href="[field:arcurl/]">
        <img src="[field:litpic/]" style="width:600px;height:272px;" >
        <div class="carousel-caption">
            [field:title function='html2text(@me)'/]
        </div>
    </a>
</div>
{/dede:arclist}

这句话的意思就是,如果循环出的是第一个,则添加 active 样式,否则为空。

两种方式分别实现 dedecms标签循环中判断第一个元素添加样式效果,有需求的朋友建议收藏起来。


以上就是本文的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361源码网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: dedecms

上一篇织梦如何实现列表页首页和其他页显示文章条数不一样

下一篇织梦模板如何实现调用显示当前会员登录名

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在