Dedecms(织梦CMS)子栏目高亮操作

青叶

前言

继续来说说织梦(坑爹)CMS的问题吧。

场景:

企业动态下,分别有如下六个栏目:

clipboard.png

要求点击到哪个栏目,哪个栏目则高亮显示

本来嘛,这不是so easy吗?(这里指PHP的其他cms)

但是对于dede,我上网看了半天,标签调用方法都尝试了,貌似没戏,当然,涉及到改源码一律忽略,没必要。(浪费时间,增加风险)

那么问题来了,怎么在短时间内解决这个问题呢?

方案

这里能想到最简单省事的就是使用Js了,当然,有人说你在栏目中判断id不就行了吗?是啊,但是id不能写死啊,否则后期用户更改栏目岂不是不灵活了。

好了,说正事。

下面是我上面调用的第一张图的html代码:

    <div class="neibu_til" current_typedir="{dede:field name='typedir'/}">
        <ul>
            {dede:channelartlist typeid="14"}
                <li typedir="{dede:field name='typedir'/}">
                    <a href="{dede:field name='typeurl'/}">
                        <div>{dede:field name='typename'/}</div>
                        <span>&nbsp;</span>
                    </a>
                </li>
            {/dede:channelartlist}
        </ul>
    </div>

结构很简单,就是一个栏目列表的循环,循环中设置一个属性,获取到当前循环到的栏目的typedir(栏目存放目录),然后还获取到当前页面的typedir,下面用js进行比较,起码typedir是不会错的。

下面是js的代码,因为还涉及到hover的效果,所以代码中有一部分是hover的:

    $(function(){
        // 初始效果
        checkMenu();

        // 移动效果
        $(".neibu_til li").hover(function(){
            $(this).siblings().find("span").attr("class","");
            $(this).find("span").attr("class","ing");
        },function(){
            $(this).find("span").attr("class","");
            checkMenu();
        });
        
        function checkMenu()
        {
            var the_cur_dir = $('.neibu_til').attr('current_typedir').split('/').pop();
            $(".neibu_til").find("li").each(function(){
                var dir_last = $(this).attr('typedir').split('/').pop();
                if (dir_last == the_cur_dir) {
                    $(this).find('span').attr('class','ing');
                }
            });
        }
    })

总结

好了,长话短说,就这么多,希望在这个不愉快的周六能给大家带来些许愉快吧。

阅读 2.7k

The code
The code

一个phper

1.5k 声望
108 粉丝
0 条评论
你知道吗?

一个phper

1.5k 声望
108 粉丝
文章目录
宣传栏