如何在单击导航栏并更改图标颜色时激活导航栏

要在单击导航栏并更改图标颜色时激活导航栏，可以使用HTML、CSS和JavaScript来实现。以下是一个简单的示例，展示了如何实现这一功能：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Bar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <ul>
            <li><a href="#" class="nav-item" data-target="home"><i class="icon home"></i></a></li>
            <li><a href="#" class="nav-item" data-target="about"><i class="icon about"></i></a></li>
            <li><a href="#" class="nav-item" data-target="contact"><i class="icon contact"></i></a></li>
        </ul>
    </nav>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.navbar {
    background-color: #333;
    padding: 10px;
}

.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.navbar li {
    margin-right: 15px;
}

.nav-item {
    color: white;
    text-decoration: none;
    font-size: 20px;
}

.nav-item:hover {
    color: #ddd;
}

.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: cover;
}

.home {
    background-image: url('home-icon.png');
}

.about {
    background-image: url('about-icon.png');
}

.contact {
    background-image: url('contact-icon.png');
}

.active {
    color: #ffcc00 !important;
}

JavaScript (script.js)

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

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