时间戳

首页 > 解决方案 > 在导航栏中单击时如何更改背景内容？

javascript - 在导航栏中单击时如何更改背景内容？

问题描述

我正在尝试创建一个带有背景视频的网站。我的想法是将背景视频作为横幅，每次用户在导航栏中更改类别时，背景视频和正文内容都会更改。

到目前为止，我已经设法使用一些滑块按钮来更改视频，但我真的不想要它们。我希望用户单击导航栏并自动更改视频。如果用户单击类别 1，则显示视频 1，如果他单击类别 2，则显示视频 2，依此类推。

任何人都可以帮我一些想法吗？我附上我的 HTML 和 JS：

//MENU RESPONSIVE
const menuBtn = document.querySelector(".menu-btn");
const navigation = document.querySelector(".navigation");

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);
    })
});

inicio.forEach((btn, i) => {
    btn.addEventListener("click", () => {
        sliderNav(i);
    })
});
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website</title>
    <script src="https://kit.fontawesome.com/f17ab486c8.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header>
        <a href="#" class="brand"><img src="img/logo.png" alt="" width="30%"></a>
        <div class="menu-btn"></div>
        <div class="navigation">
            <div class="navigation-items">
                <a href="#">Category 1</a>
                <a href="#">Category 2</a>
                <a href="#">Category 3</a>
            </div>
        </div>
    </header>

    <section class="home" id="home">
        <video class="video-slide active" src="img/01.mp4" autoplay muted loop></video>
        <video class="video-slide active" src="img/02.mp4" autoplay muted loop></video>
        <video class="video-slide" src="img/03.mp4" autoplay muted loop></video>
        <div class="content active">
            <h1>Title<br><span>1</span></h1>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos veniam labore consequatur, ab perferendis
                vero aliquid provident temporibus eius, iste optio. Quia aliquam temporibus obcaecati perferendis,
                voluptatem necessitatibus accusamus ipsum.</p>
            <a href="#">Learn more</a>
        </div>

        <div class="content">
            <h1>Title<br><span>2</span></h1>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos veniam labore consequatur, ab perferendis
                vero aliquid provident temporibus eius, iste optio. Quia aliquam temporibus obcaecati perferendis,
                voluptatem necessitatibus accusamus ipsum.</p>
            <a href="#">Read More</a>
        </div>
            <div class="slider-navigation">
            <div class="nav-btn"></div>
            <div class="nav-btn"></div>
        </div>


    </section>

    <script src="script.js"></script>
</body>

标签： javascripthtmlvideonavbar

解决方案

推荐阅读