點擊轉盤滑動鏈接時按鈕的顏色變化

我有一個引導轉盤和一系列頂部按鈕，代表組織提供的某些服務。我試圖在這裏實現兩件事：點擊轉盤滑動鏈接時按鈕的顏色變化

（這一個完成）當用戶點擊按鈕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

點擊轉盤滑動鏈接時按鈕的顏色變化

回答

相關問題