dedecms 用js高亮当前栏目

DedeCMS 是一个基于 PHP 的内容管理系统（CMS），它允许用户轻松地创建和管理网站内容。在使用 DedeCMS 时，有时需要高亮显示当前用户所在的栏目，以提供更好的用户体验。这通常通过 JavaScript 来实现。

基础概念

高亮当前栏目的目的是为了突出显示用户当前浏览的栏目，使得导航更加直观。这通常通过在导航菜单中为当前栏目添加一个特殊的 CSS 类来实现，然后通过 CSS 来定义这个类的样式，比如改变背景色或字体颜色。

类型

前端高亮：使用 JavaScript 或 jQuery 在客户端实现。
后端高亮：在服务器端生成 HTML 时，根据当前 URL 动态添加高亮类。

应用场景

适用于任何需要导航栏并且希望突出显示当前栏目的网站。

实现方法

以下是一个使用 JavaScript 实现 DedeCMS 高亮当前栏目的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DedeCMS 高亮当前栏目示例</title>
<style>
  .current {
    background-color: #f1f1f1;
    font-weight: bold;
  }
</style>
<script>
  window.onload = function() {
    var currentPath = window.location.pathname;
    var links = document.querySelectorAll('nav a');
    links.forEach(function(link) {
      if (link.getAttribute('href') === currentPath) {
        link.classList.add('current');
      }
    });
  };
</script>
</head>
<body>
<nav>
  <a href="/home/">首页</a>
  <a href="/about/">关于我们</a>
  <a href="/services/">服务</a>
  <a href="/contact/">联系我们</a>
</nav>
<!-- 页面内容 -->
</body>
</html>

可能遇到的问题及解决方法

路径匹配问题：如果 URL 中包含查询参数或锚点，直接比较 href 和 window.location.pathname 可能不会匹配。解决方法是使用正则表达式来提取路径部分进行比较。

var currentPath = window.location.pathname.replace(/\/\w+$/, '');

异步加载内容：如果导航栏是通过 AJAX 或其他异步方式加载的，上述脚本可能无法正确工作。解决方法是确保脚本在导航栏加载完成后执行，或者使用事件委托。

document.addEventListener('DOMContentLoaded', function() {
  // 上面的脚本代码
});

多级菜单：对于复杂的导航结构，可能需要递归地检查子菜单项。

function highlightCurrentLink(links) {
  links.forEach(function(link) {
    if (link.getAttribute('href') === currentPath) {
      link.classList.add('current');
    } else if (link.querySelector('ul')) {
      highlightCurrentLink(link.querySelectorAll('ul a'));
    }
  });
}