js 当前导航菜单高亮显示

在JavaScript中实现当前导航菜单的高亮显示，通常涉及到以下几个基础概念：

基础概念

DOM操作：Document Object Model（文档对象模型），允许JavaScript操作HTML文档的结构。
事件监听：为HTML元素添加事件处理器，以便在特定事件发生时执行代码。
CSS样式：通过修改元素的CSS样式来改变其外观。

实现步骤

获取导航菜单元素：使用JavaScript选择器获取所有的导航菜单项。
添加事件监听器：为每个菜单项添加点击事件监听器。
高亮显示当前项：在点击事件中，移除所有菜单项的高亮样式，然后为当前点击的菜单项添加高亮样式。

示例代码

以下是一个简单的示例，展示了如何实现这一功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Highlight</title>
    <style>
        .nav-item {
            padding: 10px;
            cursor: pointer;
        }
        .active {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
    <ul id="navMenu">
        <li class="nav-item" data-target="home">Home</li>
        <li class="nav-item" data-target="about">About</li>
        <li class="nav-item" data-target="contact">Contact</li>
    </ul>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const navItems = document.querySelectorAll('.nav-item');

            navItems.forEach(item => {
                item.addEventListener('click', function() {
                    // Remove active class from all items
                    navItems.forEach(navItem => navItem.classList.remove('active'));
                    // Add active class to the clicked item
                    this.classList.add('active');
                });
            });
        });
    </script>
</body>
</html>