导航栏左右切换js怎么写

要实现导航栏的左右切换功能，可以使用JavaScript来控制DOM元素的显示和隐藏。以下是一个简单的示例，展示了如何使用JavaScript来实现这一功能：

基础概念

DOM操作：JavaScript通过DOM（文档对象模型）与HTML页面进行交互，可以动态地修改页面内容。
事件监听：通过监听按钮点击事件，触发相应的函数来改变导航栏的状态。

示例代码

假设我们有三个导航项，并且希望可以通过左右按钮来切换显示的导航项。

<!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 {
            display: none;
        }
        .nav-item.active {
            display: block;
        }
    </style>
</head>
<body>
    <div id="navbar">
        <div class="nav-item active">导航项1</div>
        <div class="nav-item">导航项2</div>
        <div class="nav-item">导航项3</div>
    </div>
    <button id="prevBtn">上一页</button>
    <button id="nextBtn">下一页</button>

    <script>
        const navItems = document.querySelectorAll('.nav-item');
        let currentIndex = 0;

        function showNavItem(index) {
            navItems.forEach((item, i) => {
                item.classList.remove('active');
            });
            navItems[index].classList.add('active');
        }

        document.getElementById('prevBtn').addEventListener('click', () => {
            currentIndex = (currentIndex - 1 + navItems.length) % navItems.length;
            showNavItem(currentIndex);
        });

        document.getElementById('nextBtn').addEventListener('click', () => {
            currentIndex = (currentIndex + 1) % navItems.length;
            showNavItem(currentIndex);
        });
    </script>
</body>
</html>