2017-07-06 220 views
0

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

  1. (這一個完成)當用戶點擊按鈕A,然後滑動鏈接到按鈕A出現,並且按鈕A的顏色改變,指示其活動。
  2. (此處存在問題)當幻燈片A從幻燈片B或其中任何一個更改時,則按鈕A(鏈接到幻燈片A)的顏色應自動更改,以指示其各自的幻燈片已被點擊。

正如你可以在此圖像中看到,當按鈕點擊它會變成藍色和幻燈片鏈接到它的出現 when button clicked, it turns blue and slide

但在這裏,當我用下一個/上控制器更改幻燈片,按鈕不激活 enter image description here

這是我的代碼看起來像

<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功能,但我無法弄清楚如何!

+0

當你點擊下一個/ prev控件時,你的類沒有被激活,因爲它們沒有包含在鏈接/按鈕的樣式中。你需要修改你的CSS來包含控件,或者點擊添加一個活動類到各自的JS按鈕。當我回家時,我可以提供更多幫助,我現在正在使用我的手機 –

+0

感謝@Orlando提出的問題,我該怎麼做? –

+0

你想使用JavaScript還是CSS?使用CSS可能需要對html進行一些修改 –

回答

0

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