核心原理
无论哪种方法,核心思想都是一样的：
- 判断当前页面的URL。
- 将当前页面的URL与导航菜单项的链接进行比对。
- 如果匹配，就给这个菜单项添加一个特定的CSS类（
current或active）。 - 在CSS中为这个特定类定义高亮样式。
使用织梦自定义标记（最推荐、最灵活）
这是目前织梦社区最流行、最推荐的方法，它利用了织梦强大的自定义标记功能，将逻辑完全封装在模板文件中，无需修改PHP核心文件,安全且易于维护。
步骤 1：修改模板文件
找到你的网站头部模板文件，通常是 head.htm 或者你调用导航栏的模板文件（templets/default/header.htm）。
找到生成导航栏的代码,它通常是这样的：
<div id="nav">
<ul>
<li><a href='{dede:global.cfg_cmsurl/}/'>首页</a></li>
<li><a href='{dede:channel type='top' row='8'}'>[field:typename/]</a></li>
</ul>
</div>
你需要将这段代码修改为使用自定义标记，这里提供一个完整的、可以直接使用的代码块：
<div id="nav">
<ul>
<!-- 首页链接，单独处理 -->
<li><a href='{dede:global.cfg_cmsurl/}/' class='{dede:if request_string=='index.php' || $typeid==0}current{/dede:if}'>首页</a></li>
<!-- 调用顶级栏目，并判断当前栏目 -->
{dede:channel type='top' row='8'}
<li>
<a href="[field:typelink/]"
class="{dede:if typeid=='[field:id/]' || typeid=='[field:sontype/]'}current{/dede:if}">
[field:typename/]
</a>
</li>
{/dede:channel}
</ul>
</div>
代码解释：
-
首页判断：
{dede:if request_string=='index.php' || $typeid==0}：这个判断条件检查URL中是否包含index.php（首页默认文件）或者当前栏目ID$typeid是否为0（首页的$typeid为0），如果满足条件，就给<a>标签添加current类。class='... {dede:if ...}current{/dede:if} ...'：这是织梦模板的写法，表示如果条件成立，就在class属性中插入current。
-
栏目判断：
{dede:channel type='top' row='8'}：调用顶级栏目。{dede:if typeid=='[field:id/]' || typeid=='[field:sontype/]'}current{/dede:if}：这是关键判断逻辑。typeid=='[field:id/]'：判断当前页面的栏目ID是否等于当前循环到的栏目的ID，如果相等，说明用户正在访问这个栏目,高亮它。typeid=='[field:sontype/]'"：判断当前页面的栏目ID是否等于当前栏目的子栏目ID，这实现了“父栏目高亮”的效果，即当用户访问某个父栏目的子栏目时,父栏目的导航项也会保持高亮状态。
[field:typelink/]和[field:typename/]分别是栏目链接和栏目名称。
步骤 2：添加CSS样式
在你的CSS文件（通常是 /templets/default/style.css 或 /css/base.css）中,添加以下样式：
/* 默认导航样式 */
#nav ul li a {
display: block; /* 让a标签可以设置宽高和内边距 */
padding: 10px 20px;
color: #333; /* 默认文字颜色 */
text-decoration: none;
background-color: #f0f0f0; /* 默认背景色 */
}
/* 鼠标悬停效果 */
#nav ul li a:hover {
background-color: #e0e0e0;
color: #000;
}
/* 点击高亮样式 */
#nav ul li a.current {
background-color: #ff6600; /* 高亮背景色，例如橙色 */
color: #fff; /* 高亮文字颜色，例如白色 */
font-weight: bold; /* 可以加粗显示 */
}
当你点击导航栏的某个栏目时，对应的链接就会自动添加 current 类,并应用你定义的CSS高亮样式。
修改 channel.lib.php 文件（传统方法）
在一些旧版本的教程中，会采用修改织梦核心文件的方法。这种方法不推荐，因为升级织梦版本后，你的修改会丢失，需要重新修改,但了解它也有助于你理解原理。
步骤 1：修改核心文件
打开 /include/taglib/channel.lib.php 文件。
找到类似这样的代码段（大约在第98行左右，不同版本可能略有差异）：
$typeid = isset($typeid) && is_numeric($typeid) ? $typeid : 0;
在这段代码的后面,添加以下代码：
// 获取当前页面ID $currentTypeid = isset($typeid) && is_numeric($typeid) ? $typeid : 0;
找到生成 <a> 标签的地方，通常在第160行左右，找到 else 分支里的 return $typeLink;。
在这行代码的前面,添加以下代码：
// 判断是否为当前栏目，如果是则添加current类
if ($currentTypeid == $typeids[0]) {
$typeLink = preg_replace("/<a([^>]+)>/i", "<a\\1 class='current'>", $typeLink);
}
代码解释：
这段代码的作用是，在生成每个栏目链接时，检查当前页面的栏目ID是否和这个栏目的ID相等，如果相等，就用正则表达式给 <a> 标签的 class 属性里加上 current。
步骤 2：修改模板文件
模板文件就变得非常简单了，直接使用原来的标签即可，高亮逻辑由 channel.lib.php 自动处理。
<div id="nav">
<ul>
<li><a href='{dede:global.cfg_cmsurl/}/'>首页</a></li>
{dede:channel type='top' row='8'}
<li><a href="[field:typelink/]">[field:typename/]</a></li>
{/dede:channel}
</ul>
</div>
步骤 3：添加CSS样式
与方法一完全相同，在你的CSS文件中添加 .current 的样式。
使用jQuery实现（前端方法）
这种方法不依赖织梦的后端逻辑，完全通过JavaScript在前端判断，优点是不修改任何织梦文件，缺点是页面加载后会有一个短暂的“闪烁”（从无高亮到有高亮），并且如果用户禁用了JavaScript,效果会失效。
步骤 1：在模板中引入jQuery
确保你的页面已经引入了jQuery库，如果没有，可以在 head.htm 中添加：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
步骤 2：编写jQuery脚本
在 注意： 与方法一和方法二完全相同，在CSS中定义 对于绝大多数用户，强烈建议使用方法一，它是最符合织梦设计理念，也是最稳定、最可靠的解决方案。head.htm 或页面底部，添加以下 <script>
<script>
$(document).ready(function(){
// 获取当前页面的完整URL
var currentUrl = window.location.href;
// 遍历导航栏中的所有链接
$('#nav a').each(function(){
// 获取当前链接的href
var linkUrl = $(this).attr('href');
// 判断当前URL是否包含链接的href
// 使用indexOf()是为了兼容带#号的情况，如首页
if (currentUrl.indexOf(linkUrl) > -1) {
// 如果匹配，给这个链接添加current类
$(this).addClass('current');
}
});
});
</script>
#nav a 选择器表示在 id="nav" 的元素下查找所有 <a> 标签,请根据你的实际HTML结构进行调整。index.php，它也可能被误判为首页），可以优化判断逻辑,例如专门判断首页的URL。步骤 3：添加CSS样式
.current 的样式。总结与建议
方法
优点
缺点
推荐度
自定义标记
最推荐，安全、灵活、易于维护，升级无忧，逻辑清晰。
需要理解织梦模板语法。
⭐⭐⭐⭐⭐
修改核心文件
逻辑自动完成，模板代码简洁。
不推荐，修改核心文件，升级后失效，有安全风险。
⭐☆☆☆☆
jQuery实现
不修改后端文件，纯前端实现。
可能有闪烁效果，依赖JS，对SEO和JS禁用用户不友好。
⭐⭐☆☆☆
