原生js导航栏切换颜色

原生JavaScript实现导航栏切换颜色的功能，主要涉及到DOM操作和事件监听。以下是详细的基础概念、优势、类型、应用场景以及示例代码。

基础概念

DOM操作：Document Object Model（文档对象模型），允许JavaScript改变HTML元素的内容、结构和样式。
事件监听：通过监听用户的交互行为（如点击、滚动等），触发相应的函数执行。

优势

性能优化：原生JavaScript直接操作DOM，避免了框架的额外开销。
灵活性高：可以根据具体需求定制功能，不受框架限制。
学习成本低：对于简单的交互效果，原生JS更容易理解和实现。

类型

基于类的切换：通过添加或移除CSS类来改变样式。
直接样式修改：直接在JavaScript中修改元素的style属性。

应用场景

单页应用（SPA）：在页面不刷新的情况下更新导航栏状态。
响应式设计：根据用户的操作动态调整界面风格。
主题切换：允许用户自定义网站的颜色主题。

示例代码

以下是一个简单的原生JavaScript实现导航栏切换颜色的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏切换颜色</title>
    <style>
        .nav {
            display: flex;
            list-style: none;
            padding: 0;
        }
        .nav li {
            padding: 10px 20px;
            cursor: pointer;
        }
        .active {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>首页</li>
        <li>关于</li>
        <li>联系我们</li>
    </ul>

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

            navItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 移除所有li的active类
                    navItems.forEach(navItem => navItem.classList.remove('active'));
                    // 给当前点击的li添加active类
                    this.classList.add('active');
                });
            });
        });
    </script>
</body>
</html>

解释

HTML结构：创建一个无序列表<ul>，其中包含几个列表项<li>。
CSS样式：定义了基本的导航栏样式，并通过.active类来设置选中状态的背景色和文字颜色。
JavaScript逻辑：
- 使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
- 遍历所有的导航项，并为每个项添加点击事件监听器。
- 在点击事件中，首先移除所有导航项的active类，然后给当前点击的项添加active类，从而实现颜色切换效果。