齐博 变量

齐博 模板

齐博 插件

齐博 模块

齐博 小程序

齐博 配置

齐博 二次开发

齐博 其它

齐博 案例

齐博x1栏目展示内容并高亮选中内容案例

说明:比如我想把栏目(主栏目及其子栏目)展示出来的同时,也把栏目的内容展示出来。展示出来后我还要点击这条内容的时候,这条内容显示高亮加样式颜色背景等。

如:我们本教程网站一样,左侧菜单使用的是展示主栏目及子栏目,加载其下内容。点击时高亮

前台:

后台:

下面我们来讲怎么去写这个代码

1、我们可以在pc_list.htm列表页模板,pc_show1.htm内容页模板使用,我们随便找一个模板

例子 (Example)

//这里是获取内容ID传递到volist循环里,不然无法在volist里获取
{php}
$arr = ['cid'=>$id];
val($arr?:[]);
{/php}
//下面这里是循环主栏目下的所有栏目及内容,采用的是双volist循环
<div class="roc-leftmenu">
    {volist name=":getArray(fun('Sort@son',intval($fid))?:fun('Sort@brother',$fid))" id="name"}
    <div class="roc-item" {if ($rs['activate']==$menu_choose||$rs['activate']==$menu_choose.'-'.$fid)}class="ck"{/if}>
        <h2 {notempty name="$rs.bgcolor"}style="background-color:{$rs.bgcolor};"{/notempty}>
        <i class="{$style|default=''}" {notempty name="$rs.fontcolor"}style="color:{$rs.fontcolor};"{/notempty}></i>{$name}{$rs.script}
        </h2>
        <ul class="paginat">
            {volist name=":query('cms_content1',['rows'=>50,'where'=>['fid'=>$key],'order'=>['list'=>'asc'],'field'=>['id','title']])" id="vs"}
            <li {if condition="$vs.id==val('cid')"}class="ck"{/if}>
                <a href="/cms/show-{$vs.id}.html">{$vs.title|get_word=100}</a>
            </li>
            {/volist}
        </ul>
    </div>
    {/volist}
</div>

这里我们要运用到另一个《标签内外之间传递变量》教程来传递本内容的ID给volist来判断是否等于内容ID。

例子 (Example)

{php}
$arr = ['cid'=>$id];
val($arr?:[]);
{/php}

这里的意思是传递内容ID,$id给数组变量cid,以数组方式打包传进本页面任意地方调用,如:

例子 (Example)

{if condition="$vs.id==val('cid')"}class="ck"{/if}

在第二个volist循环调用输出内容的时候我们需要判断,是否打开的是此ID内容页,如果是我们给他加入样式class="ck"

然后我们给CK这个样式加个颜色等效果即可。

例子 (Example)

//此为循环主栏目所有子栏目,不包含主栏目
{volist name=":getArray(fun('Sort@son',intval($fid))?:fun('Sort@brother',$fid))" id="name"}
...
{/volist}

例子 (Example)

//此为循环CMS系统cms_content1文章表里的数据,根据的是第一个volist出栏目ID来判断其下的内容,order为排序,field为取出的字段
{volist name=":query('cms_content1',['rows'=>50,'where'=>['fid'=>$key],'order'=>['list'=>'asc'],'field'=>['id','title']])" id="vs"}
...
{/volist}

其它不明白的请在本内容下留言

上一主题 在任意页面调用商城购物车列表数据 下一主题 没有了
  • 使用社交账号登录,本站支持
全部评论(0)