方法一：

当栏目id和当前栏目id一样时执行写在模板里的高亮样式，高亮样式的类名是由标签动态输出的。下文是具体方法，我只是把这个方法写的更直白，让刚入门的小白都能看得懂。

第一步：修改栏目tabs导航

模板→标签模板→管理标签模板→栏目tabs导航，把列表内容模板里的改成自己的li，比如：

  1. 复制代码
  2. <li id="this[!--classid--]"><a href="[!--classurl--]">[!--classname--]</a></li> 

建议用id，层级较多的情况下class控制不方便。

第二步：公共模板变量里的导航输出，例如：

  1. 复制代码
  2. <div class="nav"> 
  3.   <ul> 
  4.     <li><a href="[!--news.url--]">首页</a></li> 
  5.     [showclasstemp]0,12,0,0[/showclasstemp] 
  6.   </ul> 
  7. </div> 

不知道[showclasstemp]含义的，打开帝国cms使用教程手册（http://www.phome.net/doc/manual/，建议把这个地址添加为书签，学习帝国cms必备）→美工手册→内置标签语法→点带模板的栏目导航标签(showclasstemp)。

第三步：在列表模板和内容模板里写入高亮的css，比如：

  1. 复制代码
  2. <style> 
  3. #this[!--self.classid--] a { 
  4.   color: #ff6666; 
  5. } 
  6. </style> 

[!--self.classid--]输出的是当前栏目id，当当前栏目id和栏目id相等时，执行高亮样式。

方法二：将当前栏目class通用JS动态更换成高亮样式：on

    <ul id="menu" class="nav-list">
      <li><a href="[!--news.url--]" class="on">网站首页</a></li>
      <li><a href="/e/action/ListInfo/?classid=6" class="menu6">XXXX</a></li>
      <li><a href="/e/action/ListInfo/?classid=7" class="menu7">XXXX</a></li>
      <li><a href="/e/action/ListInfo/?classid=9" class="menu9">XXXX</a></li>
      <li><a href="/e/action/ListInfo/?classid=8" class="menu8">XXXX</a></li>
      <li><a href="/e/action/ListInfo/?classid=13" class="menu13">XXXX</a></li>
      <li><a href="/e/action/ListInfo/?classid=10" class="menu10">XXXX</a></li>
      <li><a href="/e/action/ListInfo/?classid=11" class="menu11">XXXX</a></li>
      <li><a href="/e/action/ListInfo/?classid=15" class="menu15">XXXX</a></li>
      <li><a href="/e/action/ListInfo/?classid=14" class="menu14">XXXX</a></li>
    </ul>
  </div>
</div>
<script>
    const item = document.querySelector('.menu[!--self.classid--]');
    item.classList.replace("menu[!--self.classid--]","on");
</script>