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

前言

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

场景：

企业动态下，分别有如下六个栏目：

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

本来嘛，这不是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');
                }
            });
        }
    })

总结

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