帮我用js做一个顶部TAB导航栏网页五个栏 顶部居中 背景颜色为灰色 鼠标悬浮时背景颜色为白色 鼠标点击时背景颜色为绿色

以下是一个使用JavaScript实现的顶部TAB导航栏网页的示例代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        #navbar {
            background-color: gray;
            display: flex;
            justify-content: center;
            padding: 10px;
        }
        
        .tab {
            background-color: gray;
            color: white;
            padding: 10px;
            cursor: pointer;
        }
        
        .tab:hover {
            background-color: white;
        }
        
        .active {
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="navbar">
        <div class="tab">Tab 1</div>
        <div class="tab">Tab 2</div>
        <div class="tab">Tab 3</div>
        <div class="tab">Tab 4</div>
        <div class="tab">Tab 5</div>
    </div>

    <script>
        // 获取所有的tab元素
        var tabs = document.getElementsByClassName('tab');

        // 遍历每个tab元素
        for (var i = 0; i < tabs.length; i++) {
            // 添加点击事件监听器
            tabs[i].addEventListener('click', function () {
                // 移除其他tab的active类
                for (var j = 0; j < tabs.length; j++) {
                    tabs[j].classList.remove('active');
                }
                // 给当前点击的tab添加active类
                this.classList.add('active');
            });
        }
    </script>
</body>
</html>

在上述代码中，我们使用了CSS来设置顶部导航栏的样式，包括背景颜色、居中和鼠标悬浮时的样式。然后，使用JavaScript来处理点击事件，当点击某个tab时，会给该tab添加active类，同时移除其他tab的active类，从而改变背景颜色为绿色。

你可以将以上代码复制到一个HTML文件中，然后在浏览器中打开该文件，就可以看到一个具有顶部TAB导航栏的网页

帮我用js做一个顶部TAB导航栏网页五个栏 顶部居中 背景颜色为灰色 鼠标悬浮时背景颜色为白色 鼠标点击时背景颜色为绿色

帮我用js做一个顶部TAB导航栏网页五个栏顶部居中背景颜色为灰色鼠标悬浮时背景颜色为白色鼠标点击时背景颜色为绿色