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

有三个入口点。视频块

（id=“鉴定项目”）

带引号的块

（id=“鉴定项目容器”）

和块点

（id=“鉴定项目导航”）

我需要的是，当我点击橙色点时，

处于活动状态

类在三个位置发生变化（视频块引号块和点本身）。一个简单的幻灯片，但有三个入口点

我隐藏了类处于活动状态时的所有内容

，默认情况下，所有元素

显示：无

。这将隐藏所有元素，除了每个块中的一个。点不隐藏，它们只有一个按钮处于活动状态

我编写了

JS

代码，但在这里单击时它也保持活动状态。也就是说，这些类不会更改它们为每个块添加其他类的方式

全屏打开代码，否则引导将不会显示限制为sm分辨率的视频块

var header=document.getElementById（“推荐导航”）；
var btns=header.getElementsByClassName（“推荐资产净值项目”）；
对于（变量i=0；i

。推荐项目：：之后{
内容：''；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
z指数：1；
背景：透明；
过渡：背景缓和0.5s，z指数0.5s；
背景色：rgba（255、109、58、0.8）；
}
.证明项目：悬停：：之后{
背景色：透明；
}
.客户{
显示：无；
身高：100%；
宽度：100%；
}
.处于活动状态{
显示：块！重要；
}
.推荐物品容器{
填充：120px；
保证金：0自动；
文本对齐：居中；
}
.推荐性引语{
显示：无；
变换：translateY（0）；
不透明度：1；
过渡：不透明度.75s立方贝塞尔（0.19,1,0.22,1）0.15s，
变换.75s三次贝塞尔（0.19,1,0.22,1）0.15s；
}
.推荐引文{
颜色：#FF6D3A；
字体大小：48px；
保证金：50px自动；
}
.推荐报价来源{
颜色：rgba（255、109、58、0.5）；
字体大小：16px；
字母间距：1px；
文本转换：大写；
}
.证言导航{
/*转化：translateX（-50%）；
位置：绝对位置；
z指数：6；
底部：60px；
左：50%*/
利润率最高：5%；
显示器：flex；
保证金：0自动；
弹性基准：100%；
证明内容：中心；
}
.证言资产净值项目{
宽度：11px；
高度：11px；
显示：内联块；
利润率：0.10px；
背景色：rgba（54,59,62,0.4）；
边界半径：100%；
光标：指针；
过渡：背景色.75s立方贝塞尔（0.19,1,0.22,1），
盒影.75s立方贝塞尔（0.19,1,0.22,1）；
}
.推荐导航项：未（.is active）：悬停{
背景色：rgba（255、109、58、0.4）；
}
.证明-nav-item.is-active{
背景色：#FF6D3A；
}

加入数以百万计的正在做他们的工作的人
布尔巴苏尔最喜欢的东西
“感谢我们的客户，相信我们”
&mdash；帕特里克
“感谢我们的客户，相信我们”
&mdash；安娜
“感谢我们的客户，相信我们”
&mdash；塞尔焦

您有三个元素的类“是活动的”

<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>

这项工作：

如果要迭代并更改HTMLCollection的所有值，需要先将其转换为数组。见此：

你有三个元素的类“是活跃的”

<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>

这项工作：

如果要迭代并更改HTMLCollection的所有值，需要先将其转换为数组。见此：

使用以下命令：）

var header=document.getElementById（“推荐导航”）；
var btns=header.getElementsByClassName（“推荐资产净值项目”）；
对于（变量i=0；i

使用以下命令：）

var header=document.getElementById（“推荐导航”）；
无功基站=
var current = document.getElementsByClassName("is-active");
current[2].className = current[2].className.replace(" is-active", "");

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

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