单击链接到它的轮播幻灯片时更改按钮的颜色答案

【问题标题】：change color of button when carousel slide linked to it is clicked单击链接到它的轮播幻灯片时更改按钮的颜色
【发布时间】：2017-12-10 23:51:06
【问题描述】：

我有一个引导轮播，顶部有一系列按钮，代表组织提供的某些服务。我想在这里实现两件事：

（此操作已完成）当用户单击按钮 A 时，会出现链接到按钮 A 的幻灯片，并且按钮 A 的颜色会发生变化，表明其处于活动状态。
（这里有问题）当幻灯片 A 从幻灯片 B 或任何其他更改时，按钮 A（链接到幻灯片 A）的颜色应自动更改，指示其相应的幻灯片已被单击。

正如您在这张图片中看到的，当按钮被点击时，它会变成蓝色并出现与之链接的幻灯片

但是在这里，当我使用下一个/上一个控制器更改幻灯片时，按钮没有被激活

这就是我的代码的样子

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

等等..

风格：

  .nav1 a:active, .nav1 a:focus {
  text-decoration: none;
  color: #8C9EFF;
  background: #80D8FF;
}

我相信它与 slide.bs 功能有关，但我不知道怎么做！

【问题讨论】：

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

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

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

请注意，原始解决方案来自 How to change customized carousel indicator background color?，我刚刚对其进行了修改以使用您的类和 ID。

【讨论】：