点击导航栏(Navbar)时如何切换背景视频及对应页面内容？

你已经封装好了切换视频和内容的sliderNav方法，只需要给导航栏的分类选项绑定点击事件、对应到正确的索引即可，步骤如下： #

1 修正现有代码的已知问题 #

• 现有JS代码里inicio变量未定义，这段遍历代码会报错，直接删除即可
• 现有HTML里前2个video-slide都加了active类，会同时显示两个视频，只保留第一个的active即可
• 现有内容块content只有2个、滑块按钮nav-btn只有2个，但你有3个分类和3个视频，注意对应补齐

2 给导航栏分类绑定点击事件 #

在JS代码中新增获取导航分类元素的逻辑，遍历绑定点击事件，代码如下：

// 新增：获取导航栏所有分类项
const navCategories = document.querySelectorAll(".navigation-items a");

navCategories.forEach((item, i) => {
  item.addEventListener("click", (e) => {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    // 调用你已有的切换方法，传入对应索引即可
    sliderNav(i);
    // 如果是移动端点击分类后，自动收起导航菜单
    menuBtn.classList.remove("active");
    navigation.classList.remove("active");
  });
});

完整修改后的JS代码参考 #

//MENU RESPONSIVE
const menuBtn = document.querySelector(".menu-btn");
const navigation = document.querySelector(".navigation");
// 新增：获取导航栏所有分类项
const navCategories = document.querySelectorAll(".navigation-items a");

menuBtn.addEventListener("click", () => {
    menuBtn.classList.toggle("active");
    navigation.classList.toggle("active");
});

//Video Slider Nav
const btnsSlide = document.querySelectorAll(".nav-btn");
const slides = document.querySelectorAll(".video-slide");
const contents = document.querySelectorAll(".content");

let sliderNav = function (manual) {
    btnsSlide.forEach((btn) => {
        btn.classList.remove("active")
    });

   slides.forEach((slide) => {
        slide.classList.remove("active")
    });

    contents.forEach((content) => {
        content.classList.remove("active")
    });

    btnsSlide[manual].classList.add("active");
    slides[manual].classList.add("active");
    contents[manual].classList.add("active");
}

btnsSlide.forEach((btn, i) => {
    btn.addEventListener("click", () => {
        sliderNav(i);
    })
});

// 新增：导航分类点击绑定
navCategories.forEach((item, i) => {
  item.addEventListener("click", (e) => {
    e.preventDefault();
    sliderNav(i);
    menuBtn.classList.remove("active");
    navigation.classList.remove("active");
  });
});

可选优化：保留导航项选中状态 #

如果需要高亮当前选中的导航分类，可以按如下步骤修改：

1. 先在CSS里添加导航项激活样式，示例：.navigation-items a.active { color: #2196F3; }
2. 修改sliderNav方法，新增切换导航项active类的逻辑：

let sliderNav = function (manual) {
    // 新增：先移除所有导航项的active
    navCategories.forEach((item) => {
        item.classList.remove("active");
    });
    // 原有逻辑不变
    btnsSlide.forEach((btn) => {
        btn.classList.remove("active")
    });
    slides.forEach((slide) => {
        slide.classList.remove("active")
    });
    contents.forEach((content) => {
        content.classList.remove("active")
    });
    // 新增：给当前点击的导航项加active
    navCategories[manual].classList.add("active");
    btnsSlide[manual].classList.add("active");
    slides[manual].classList.add("active");
    contents[manual].classList.add("active");
}

内容的提问来源于stack exchange，提问作者Frank