dedecms导航高亮显示

Dedecms（织梦内容管理系统）是一款流行的PHP开源网站管理系统。在Dedecms中，导航高亮显示通常是指在网站导航栏中，当前页面对应的导航项会被高亮显示，以突出用户当前所在的位置。

基础概念

导航高亮显示是一种用户体验设计手段，通过视觉上的变化提示用户当前所在页面的位置，帮助用户快速定位和导航。

类型

导航高亮显示可以通过多种方式实现，常见的包括：

CSS类名切换：通过JavaScript或服务器端脚本动态切换导航项的CSS类名，从而改变其样式。
内联样式：直接在HTML元素中设置内联样式，使当前导航项高亮显示。
伪类选择器：利用CSS伪类选择器（如:hover、:active）来实现高亮效果。

应用场景

导航高亮显示适用于各种类型的网站，特别是那些具有多级导航菜单的网站，如新闻网站、电商网站、企业官网等。

实现方法

以下是一个简单的示例，展示如何在Dedecms中实现导航高亮显示。

HTML部分

<ul class="nav">
    <li><a href="index.php" class="{dede:field.type='index' ? 'active' : ''}">首页</a></li>
    <li><a href="list.php?id=1" class="{dede:field.type='list' && dede:field.id=='1' ? 'active' : ''}">分类1</a></li>
    <li><a href="list.php?id=2" class="{dede:field.type='list' && dede:field.id=='2' ? 'active' : ''}">分类2</a></li>
    <li><a href="article.php?id=3" class="{dede:field.type='article' && dede:field.id=='3' ? 'active' : ''}">文章1</a></li>
</ul>

CSS部分

.nav li a.active {
    color: red; /* 高亮颜色 */
    font-weight: bold; /* 加粗字体 */
}

JavaScript部分（可选）

如果需要更复杂的逻辑，可以使用JavaScript来实现高亮显示。

document.addEventListener('DOMContentLoaded', function() {
    var currentPath = window.location.pathname;
    var navItems = document.querySelectorAll('.nav li a');
    navItems.forEach(function(item) {
        if (item.getAttribute('href') === currentPath) {
            item.classList.add('active');
        }
    });
});