导航栏js点击选中效果

<!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-item {
            padding: 10px;
            cursor: pointer;
        }
        .active {
            background-color: #f0f0f0;
            color: #007bff;
        }
    </style>
</head>
<body>
    <div id="navbar">
        <div class="nav-item" onclick="selectItem(this)">首页</div>
        <div class="nav-item" onclick="selectItem(this)">产品</div>
        <div class="nav-item" onclick="selectItem(this)">关于我们</div>
    </div>

    <script>
        function selectItem(item) {
            // 移除所有项的选中状态
            var items = document.querySelectorAll('.nav-item');
            items.forEach(function(i) {
                i.classList.remove('active');
            });
            // 添加当前项的选中状态
            item.classList.add('active');
        }
    </script>
</body>
</html>

function selectItem(item) {
    var items = document.querySelectorAll('.nav-item');
    items.forEach(function(i) {
        i.classList.remove('active');
    });
    item.classList.add('active');
}

.active {
    background-color: #f0f0f0;
    color: #007bff;
}