织梦栏目高亮效果如何实现？

使用织梦内置的 {dede:field name='typeid'} 标签（最推荐、最简单）

这是最标准、最织梦化的方法，利用了织梦模板系统的一个核心变量，它适用于顶级栏目和二级栏目的高亮。

原理： 织梦在加载栏目页时，会自动将当前栏目的ID值赋给系统变量 typeid，我们只需要在模板中判断当前栏目的ID是否等于我们想要高亮的栏目的ID即可。

适用场景：

• 单独的栏目列表页 (list_xxx.htm)
• 栏目下的文章内容页 (article_xxx.htm)

操作步骤：

1. 获取栏目ID： 你需要知道你想高亮的那个栏目的ID，你可以登录织梦后台，进入【栏目管理】，鼠标悬停在那个栏目名称上，浏览器状态栏会显示链接，plus/catalog.php?tid=2，这里的 2 就是该栏目的ID。

2. 修改栏目列表页模板 (list_xhtm): 找到你的栏目列表页模板文件（通常在 /templets/default/ 目录下或你自定义的模板目录里），找到主导航的HTML代码，例如一个 <ul> 列表。

   
   （图片来源网络，侵删）

   修改前（普通导航）：

   <ul class="nav">
     <li><a href="/">网站首页</a></li>
     <li><a href="/plus/list.php?tid=1">公司简介</a></li>
     <li><a href="/plus/list.php?tid=2">产品中心</a></li>
     <li><a href="/plus/list.php?tid=3">新闻资讯</a></li>
     <li><a href="/plus/list.php?tid=4">联系我们</a></li>
   </ul>

   修改后（带高亮效果的导航）： 我们为每个 <li> 标签加上 dede:if 条件判断，如果当前栏目的ID (typeid) 等于目标栏目的ID，就在 <li> 上添加一个高亮样式，class="current"。

   <ul class="nav">
     <li><a href="/">网站首页</a></li>
     <!-- 公司简介 ID=1 -->
     <li>
       <a href="/plus/list.php?tid=1">公司简介</a>
     </li>
     <!-- 产品中心 ID=2 -->
     <li {dede:if typeid='2'}class="current"{/dede:if}>
       <a href="/plus/list.php?tid=2">产品中心</a>
     </li>
     <!-- 新闻资讯 ID=3 -->
     <li {dede:if typeid='3'}class="current"{/dede:if}>
       <a href="/plus/list.php?tid=3">新闻资讯</a>
     </li>
     <!-- 联系我们 ID=4 -->
     <li {dede:if typeid='4'}class="current"{/dede:if}>
       <a href="/plus/list.php?tid=4">联系我们</a>
     </li>
   </ul>

3. 添加CSS样式： 在你的CSS文件中，为 .current 类定义样式，比如改变背景色、文字颜色或添加下划线。

   /* 默认导航样式 */
   .nav li a {
     display: block;
     padding: 10px 20px;
     color: #333;
     text-decoration: none;
   }
   /* 高亮样式 */
   .nav li.current a {
     background-color: #007bff;
     color: #ffffff;
   }

使用 {dede:global name='itemindex'/} 变量（适用于循环中的高亮）

如果你的导航是通过 {dede:channel} 标签循环出来的，那么使用 typeid 判断会有些麻烦，因为循环内的 typeid 每次都在变，这时，{dede:global name='itemindex'/} 变量就派上用场了。

原理： {dede:global name='itemindex'/} 会输出当前 {dede:channel} 循环的次数序号（从1开始），我们可以通过判断这个序号是否等于我们想高亮的栏目的序号来实现高亮。

适用场景：

• 使用 {dede:channel} 或 {dede:channelartlist} 循环生成导航栏。

操作步骤：

1. 修改导航栏模板代码： 假设你想让第二个栏目高亮。

   <ul class="nav">
     <li><a href="/">网站首页</a></li>
     {dede:channel type='top' typeid='0'}
     <li {dede:if itemindex == '2'}class="current"{/dede:if}>
       <a href='[field:typelink/]'>[field:typename/]</a>
     </li>
     {/dede:channel}
   </ul>

   • type='top' 表示只调用顶级栏目。
   • typeid='0' 表示从顶级栏目开始调用。
   • {dede:if itemindex == '2'} 判断当前循环的是否是第二个栏目（序号从1开始）。

2. 添加CSS样式： 和方法一一样，在CSS中定义 .current 的样式即可。

使用JS判断当前URL（最灵活，但略复杂）

如果你想让高亮效果不仅限于栏目页,还能在文章页、自定义页面等页面生效，并且不想修改每个栏目的模板，那么使用JavaScript是最佳选择。

原理： 通过JS获取当前页面的URL，然后与每个导航链接的URL进行比对，如果匹配，就给对应的 <li> 元素添加高亮样式。

操作步骤：

1. 准备HTML结构（给每个导航项加上唯一的ID或类名）： 为了方便JS找到对应的元素，最好给每个 <li> 或 <a> 一个独特的ID或类名。

   <ul class="nav">
     <li id="nav-home"><a href="/">网站首页</a></li>
     <li id="nav-about"><a href="/plus/list.php?tid=1">公司简介</a></li>
     <li id="nav-product"><a href="/plus/list.php?tid=2">产品中心</a></li>
     <li id="nav-news"><a href="/plus/list.php?tid=3">新闻资讯</a></li>
     <li id="nav-contact"><a href="/plus/list.php?tid=4">联系我们</a></li>
   </ul>

2. 编写JavaScript代码： 将以下代码放在你模板文件的底部（</body> 标签之前）。

   <script>
   document.addEventListener('DOMContentLoaded', function() {
     // 获取当前页面的URL路径
     var currentPath = window.location.pathname;
     // 获取所有的导航链接
     var navLinks = document.querySelectorAll('.nav a');
     // 遍历所有链接
     navLinks.forEach(function(link) {
       // 如果链接的href属性值包含当前路径，则给其父元素添加高亮类
       if (link.getAttribute('href').indexOf(currentPath) !== -1) {
         // .current 是你在CSS中定义的高亮样式类
         link.parentNode.classList.add('current');
       }
     });
   });
   </script>

   • window.location.pathname 获取的是当前URL的路径部分，/plus/list.php?tid=2。
   • 这种方法可以自动匹配,无论是栏目页还是文章页，只要文章是在某个栏目下的，它就会高亮对应的栏目导航。

3. 添加CSS样式： 同样，在CSS中定义 .current 的样式。

总结与对比

给新手的建议： 直接使用方法一，它是最稳定、最符合织梦习惯的做法，如果你遇到的是循环生成的导航，再考虑方法二。方法三作为了解即可，在特殊情况下会非常有用。