点击转盘滑动链接时按钮的颜色变化

我有一个引导转盘和一系列顶部按钮，代表组织提供的某些服务。我试图在这里实现两件事：点击转盘滑动链接时按钮的颜色变化

（这一个完成）当用户点击按钮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功能，但我无法弄清楚如何！

来源

2017-07-06 Riya Jain

当你点击下一个/ prev控件时，你的类没有被激活，因为它们没有包含在链接/按钮的样式中。你需要修改你的CSS来包含控件，或者点击添加一个活动类到各自的JS按钮。当我回家时，我可以提供更多帮助，我现在正在使用我的手机 –

感谢@Orlando提出的问题，我该怎么做？ –

你想使用JavaScript还是CSS？使用CSS可能需要对html进行一些修改 –

一个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。

来源

2017-07-07 18:12:09

点击转盘滑动链接时按钮的颜色变化

回答

相关问题