织梦导航选中高亮怎么实现

访客进入某个栏目页时，顶部导航对应的菜单项应该保持高亮状态，这是提升用户体验、降低迷失感的基本要求。但织梦默认模板往往不会自动给当前栏目加高亮 class，需要二次开发。本文围绕织梦导航选中高亮怎么实现，给出 currentstyle、PHP 判断、JS 方案三种思路。

一、为什么要做导航高亮

导航高亮不仅是视觉问题，更是可用性问题。没有高亮的导航会让访客失去位置感，尤其在栏目层级较深的内容站，访客容易反复跳转却找不到当前位置。搜索引擎也会通过导航结构理解页面层级，高亮标识能间接增强主题相关性信号。

二、channel 标签的 currentstyle 参数

channel 标签内置了 currentstyle 参数，专门用于当前栏目高亮。写法：

{dede:channel type='top' row='10' currentstyle="<li class='on'><a href='~typelink~'>~typename~</a></li>"}
  <li><a href="[field:typelink/]">[field:typename/]</a></li>
{/dede:channel}

当循环到当前栏目时，会自动用 currentstyle 模板替换默认模板，输出 class='on'。CSS 中只需：

.nav li.on a{color:#fff;background:#c62828;}

currentstyle 的局限

currentstyle 只在栏目页生效，文章页不会触发，因为文章页的当前栏目需要通过文章的 typeid 反推。这是新手最常踩的坑。

三、文章页导航高亮的 PHP 方案

文章页要让导航高亮，需在 channel 循环里判断当前 typeid 是否等于栏目 id。可在模板中用 runphp 实现：

{dede:channel type='top' row='10'}
  <li<?php
    $typeid=@me;
    $cur=$refObj->Fields['typeid'];
    if(!$cur && isset($GLOBALS['envs']['typeid'])){
      $cur=$GLOBALS['envs']['typeid'];
    }
    // 取顶级栏目
    $top=GetTopTypename($cur);
    if($typeid==$top){ echo ' class="on"'; }
  ?>>
    <a href="[field:typelink/]">[field:typename/]</a>
  </li>
{/dede:channel}

其中 GetTopTypename 用于把子栏目 typeid 反查到顶级栏目，确保进入子栏目或文章页时父级导航仍能高亮。

四、JS 方案：通用性更强

如果不想改模板，可以在公共头部引入一段 JS，根据当前 URL 匹配导航链接高亮：

<script>
(function(){
  var path=location.pathname;
  var links=document.querySelectorAll('.nav a');
  links.forEach(function(a){
    var href=a.getAttribute('href');
    if(href && href !=='/' && path.indexOf(href)===0){
      a.parentNode.classList.add('on');
    }
  });
})();
</script>

JS 方案对静态化页面、伪静态页面都有效，但需要在 DOM 加载完成后执行。

五、注意事项

六、后续优化方向

实现织梦导航选中高亮后，建议把高亮判断逻辑封装成公共模板片段 header.htm，全站统一调用，后续维护只改一处。对于响应式站点，可在移动端汉堡菜单展开后保留当前栏目自动展开子菜单，让移动访客也能一眼看到自己的位置。把导航高亮与面包屑、侧栏推荐位联动设计，让整站的位置感知更立体，访客无论从哪个入口进站，都能快速定位到自己需要的内容。