Javascript 单击链接到按钮的旋转木马幻灯片时更改按钮的颜色

我有一个引导转盘和它上面的一系列按钮，代表一个组织提供的某些服务。我在这里试图实现两件事：

（此操作已完成）当用户单击按钮A时，将显示链接到按钮A的幻灯片，按钮A的颜色将更改，表明其处于活动状态

（此处有问题）当幻灯片A从幻灯片B或其他幻灯片更改时，按钮A（链接到幻灯片A）的颜色应自动更改，表明其各自的幻灯片已被单击

正如您在此图像中所看到的，当单击按钮时，它将变为蓝色，并显示链接到它的幻灯片

但在这里，当我使用next/prev控制器更改幻灯片时，按钮不会被激活

这就是我的代码的样子

    <nav1>
        <ul class="nav1">
            <li><a href="#" data-target="#myCarousel1" data-slide-to="0" class="image1"></a>
            <h4>Analytics & <br> Optimization</li>

            <li><a href="#" data-target="#myCarousel1" data-slide-to="1" class="image2"></a>
            <h4>Design<br> Services</h4></li>

            <li><a href="#" data-target="#myCarousel1" data-slide-to="2" class="image4"></a>
            <h4>Web & Mobile<br> Technology</h4></li>

            <li><a href="#" data-target="#myCarousel1" data-slide-to="3" class="image3"></a>
            <h4>Online <br> Marketing</h4></li>

            <li><a href="#" data-target="#myCarousel1" data-slide-to="4" class="image5"></a>
            <h4>Cyber<br> Security</h4></li>

            <li><a href="#" data-target="#myCarousel1" data-slide-to="5" class="image6"></a>
            <h4>Digital<br> Transformation</h4></li>
        </ul>
    </nav1>

    <div id="myCarousel1" class="carousel slide" data-ride="carousel" data-interval="false">    
        <!-- Wrapper for slides -->
        <div class="carousel-inner">     
    <div class="item active">
            <div class="clearfix"><img class="img2" src="assets/images/analysis.png">
        </div>  
          </div>
</div>

---

我相信这与slide.bs函数有关，但我不知道如何实现

一个Javascript示例。这是有限的，因为我没有所有的代码

您将绑定到旋转木马的幻灯片操作中，然后找到图像类的正确实例，并将活动类添加到其中，然后找到已包含活动类的实例并将其删除

`$('#myCarousel1').on('slid.bs.carousel', function (event) {
    var nextactiveslide = $(event.relatedTarget).index();
    var $btns = $(".nav1");
    var $active = $btns.find("[data-slide-to='" + nextactiveslide + "']");
    $btns.find("div[class^='image']").removeClass("active");
    $active.find("div[class^='image']").addClass("active");
});`

---

注意，最初的解决方案来自我刚刚修改它以使用您的类和ID。

当您点击下一个/上一个控件时，您的类不会被激活，因为它们不包括链接/按钮的样式。您需要修改css以包含控件，或者在使用JS单击相应按钮时添加一个活动类。当我回到家时，我可以提供更多帮助。我现在正在打电话。谢谢你回答我的问题@Orlando，我应该做什么？你想使用javascript还是CSS？使用CSS可能需要对html进行一些修改

`$('#myCarousel1').on('slid.bs.carousel', function (event) {
    var nextactiveslide = $(event.relatedTarget).index();
    var $btns = $(".nav1");
    var $active = $btns.find("[data-slide-to='" + nextactiveslide + "']");
    $btns.find("div[class^='image']").removeClass("active");
    $active.find("div[class^='image']").addClass("active");
});`