调用任意的一级栏目，如何让选中的二级子栏目实现高亮显示？

PHPCMS 实现选中栏目高亮的多种情况和方法

在phpcms开发中，会遇到各种导航中一级栏目的高亮显示，比如：顶部导航、侧边栏导航、以及对应二级子栏目的高亮显示，这里，我们探讨其中的情况之一：“ 调用任意的一级栏目，如何让选中的二级子栏目实现高亮显示？ ”

各种情况和实现方法

• 调用任意的一级栏目，如何让选中的二级子栏目实现高亮显示？
• 调用任意的一级栏目，如何让选中的二级子栏目和父级栏目都实现高亮显示？
• 调用任意的一级栏目，如何让首页始终处于高亮显示状态？
• 其他情况和解决办法

---

本文支持 “ 调用任意的一级栏目，如何让选中的二级子栏目实现高亮显示？ ” ， 具体请参考文章介绍。

---

关键代码块，示下：

代码块语法遵循标准markdown代码，例如：

{template "content","header_ucld"}

<!--中部主体区域-->
    <div class="main">
        <div class="sub-main">
            <div class="nav-wrap">
                <h2>关于我们<span class="en">ABOUT</span></h2>
                    <ul class="main-nav">
                        <a href="">
                            <li class="first-node father ab-nav">
                                公司简介
                            </li>
                        </a>

                        <li class="first-node father active">
                        <!--list:新闻动态-->{$CATEGORYS[9][catname]}<span class="black-top mini left-nav-prod-pos"><i class="black-top1"></i></span>
                            <ul class="nav">
                                <li {if $catid==10} class="focus"{/if}>
                                    <a href="{$CATEGORYS[10][url]}">
                                        <span class="icon__survey icon__16px"></span>
                                        <!--最新动态-->
                                        {$CATEGORYS[10][catname]}
                                    </a>
                                </li>
                                <li {if $catid==11} class="focus"{/if}>
                                    <a href="{$CATEGORYS[11][url]}">
                                        <i class="icon__edu icon__16px"></i>
                                        <!--媒体报道-->
                                        {$CATEGORYS[11][catname]}
                                    </a>
                                </li>
                                <li {if $catid==12} class="focus"{/if}>
                                    <a href="{$CATEGORYS[12][url]}">
                                        <i class="icon__16px icon__refresh"></i>
                                        <!--技术分享-->
                                        {$CATEGORYS[12][catname]}
                                    </a>
                                </li>
                                <li {if $catid==13} class="focus"{/if}>
                                    <a href="{$CATEGORYS[13][url]}">
                                        <i class="icon__16px icon__usafe"></i>
                                        <!--安全资讯-->
                                        {$CATEGORYS[13][catname]}
                                    </a>
                                </li>
                            </ul>
                        </li>

                    </ul>
                </div>

            <!--<script>
                //改造之前的二级栏目高亮控制代码
                (function() {
                    function foucs(i, j) {
                        if(j!=null) {
                            $('.main-nav .first-node').eq(i).addClass('active').find('.nav li').eq(j).addClass('focus');
                        } else {
                            $('.main-nav .first-node').eq(i).addClass('focus')
                        }
                    }
                    foucs(1, {
                        55: 0,
                        56: 1,
                        53: 2,
                        82: 4,
                        57: 5
                    }[55]);
                })();
            </script>-->

            ···其他代码省略···

        </div>
    </div>

{template "content","footer_ucld"}

---

以一级栏目“ 新闻动态 ” 下的 子栏目（二级栏目）：“ 技术分享 ”为例，假设我们想让它被选中的时候处于高亮显示状态，
通过上述代码不难发现，想让选中的二级栏目的样式处于高亮显示状态，仅需要设置唯一的代码，那就是：

<li {if $catid==12} class="focus"{/if}>

---

也就是说，只需要设置一行代码，即if 条件判断语句，就可以了。

更多情况，参考其他文章。