Question

有三个入口点。视频块(id="testimonials-item")阻止引号(id="testimonials-item-container")和阻止点(id="testimonials-nav")。

我需要当我点击橙色点时is-active类在三个位置发生变化（视频块引用块以及点本身）。一个简单的幻灯片，但有三个入口点。

我使用 is-active 隐藏所有内容，默认情况下隐藏所有元素display: none。除了每个块之外，所有元素都隐藏了。点不是隐藏的，只有一个按钮处于活动状态。

我编写了JS代码，但点击此处它仍然有效。也就是说，类不会改变它们为每个块附加类添加的方式。

全屏打开代码，否则Bootstrap将不会显示我申请sm分辨率时限制的视频块

＆＃13;

var header = document.getElementById("testimonials-nav");
var btns = header.getElementsByClassName("testimonials-nav-item");
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function () {
        var current = document.getElementsByClassName("is-active");
        current[0].className = current[0].className.replace(" is-active", "");
        this.className += " is-active";
    });
}

＆＃13;

.testimonials-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: transparent;
    transition: background ease-out 0.5s, z-index 0.5s;
    background-color: rgba(255, 109, 58, 0.8);
}
.testimonials-item:hover::after {
    background-color: transparent;
}

.clients {
    display: none;
    height: 100%;
    width: 100%;
}
.is-active {
    display: block !important;
}
.testimonials-item-container {
    padding: 120px;
    margin: 0 auto;
    text-align: center;
}
.testimonial-quote {
    display: none;
    transform: translateY(0);
    opacity: 1;
    transition: opacity .75s cubic-bezier(0.19, 1, 0.22, 1) 0.15s,
    transform .75s cubic-bezier(0.19, 1, 0.22, 1) 0.15s;
}
.testimonial-quote-text {
    color: #FF6D3A;
    font-size: 48px;
    margin: 50px auto;
}
.testimonial-quote-source {
    color: rgba(255, 109, 58, 0.5);
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.testimonials-nav {
    /* transform: translateX(-50%);
    position: absolute;
    z-index: 6;
    bottom: 60px;
    left: 50%; */
    margin-top: 5%;
    display: flex;
    margin: 0 auto;
    flex-basis: 100%;
    justify-content: center;
}
.testimonials-nav-item {
    width: 11px;
    height: 11px;
    display: inline-block;
    margin: 0 10px;
    background-color: rgba(54, 59, 62, 0.4);
    border-radius: 100%;
    cursor: pointer;
    transition: background-color .75s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow .75s cubic-bezier(0.19, 1, 0.22, 1);
}
.testimonials-nav-item:not(.is-active):hover{
    background-color: rgba(255, 109, 58, 0.4);
}
.testimonials-nav-item.is-active {
    background-color: #FF6D3A;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container-fluid">
        <div class="row">
            
                <div class="d-xs-none d-sm-none d-md-none d-lg-block d-xl-block col-lg-6 col-xl-6 no-padding">
                    <div  id="testimonials-item" class="testimonials-item">
                        <video autoplay loop class="clients" muted>
                            <source src="//cdn2.editmysite.com/videos/landing-pages/global/home-weebly4/v2/testimonials/montainer.mp4" type="video/mp4" />
                        </video>
                        <video autoplay loop class="clients is-active" muted>
                            <source src="//cdn2.editmysite.com/videos/landing-pages/global/home-weebly4/v2/testimonials/olive-aloe.mp4" type="video/mp4" />
                        </video>
                        <video autoplay loop class="clients" muted>
                            <source src="//cdn2.editmysite.com/videos/landing-pages/global/home-weebly4/v2/testimonials/alibi.mp4" type="video/mp4" />
                        </video>
                    </div>
                    
                </div>
                <div class="col col-lg-6 col-xl-6">
                    <div id="testimonials-item-container" class="testimonials-item-container">
                        <h3 class="testimonials-title">Join <strong> millions</strong> of people who are doing their
                             favorite things on Bulbasaur</h3>
                        <div class="testimonial-quote is-active">
                            <h2 class="testimonial-quote-text">"Thanks to <strong>Bulbasaur</strong>  our customers, trust us"</h2>
                            <h4 class="testimonial-quote-source">&mdash; Patrick</h4>
                        </div>
                        <div class="testimonial-quote">
                            <h2 class="testimonial-quote-text">"Thanks to Bulbasaur our customers, trust us"</h2>
                            <h4 class="testimonial-quote-source">&mdash; Anna</h4>
                        </div>
                        <div class="testimonial-quote">
                            <h2 class="testimonial-quote-text">"Thanks to Bulbasaur our customers, trust us"</h2>
                            <h4 class="testimonial-quote-source">&mdash; Sergio</h4>
                        </div>
                        <nav  id="testimonials-nav" class="testimonials-nav">
                            <a class="testimonials-nav-item" data-stepnav="1" href="#"></a>
                            <a class="testimonials-nav-item is-active" data-stepnav="2" href="#"></a>
                            <a class="testimonials-nav-item" data-stepnav="3" href="#"></a>
                        </nav>
                    </div>
                </div>
            
        </div>
    </div>

＆＃13;

Answer 1

使用此：）

var header = document.getElementById("testimonials-nav");
var btns = header.getElementsByClassName("testimonials-nav-item");
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
        var current = document.querySelector(".testimonials-nav-item.is-active");
        var client = document.querySelector(".clients.is-active");
        var quote = document.querySelector(".testimonial-quote.is-active");
        current.classList.remove("is-active");
        client.classList.remove("is-active");
        quote.classList.remove("is-active");
        addActiveClass(this.getAttribute("data-stepnav"));
        this.className += " is-active";
    });
}

function addActiveClass(index) {
    index = parseInt(index) - 1;
    var quote = document.getElementsByClassName("testimonial-quote");
    var client = document.getElementsByClassName("clients");
    client[index].classList.add("is-active");
    quote[index].classList.add("is-active");
}

Answer 2

你有班级＆＃34;是活跃的＆＃34;三个要素

<video autoplay loop class="clients is-active" muted>
<div class="testimonial-quote is-active">
<a class="testimonials-nav-item is-active" data-stepnav="2" href="#"></a>

执行此操作时，您将获得3个元素，橙色按钮是第3个元素：

var current = document.getElementsByClassName("is-active");

这有效：https://jsfiddle.net/cCrul/k45xgd5g/

var current = document.getElementsByClassName("is-active");
current[2].className = current[2].className.replace(" is-active", "");

如果要迭代并更改HTMLCollection的所有值，则需要先将其转换为数组。请参阅：https://jsfiddle.net/cCrul/k45xgd5g/12/

var current = document.getElementsByClassName("is-active");
current = Array.prototype.slice.call(current);
for (var j in current){
    current[j].className = current[j].className.replace(" is-active", "");
}

如何同时切换三个元素中的类

2 个答案: