當引導圖像滑動時更改div背景色

Question

我想做類似這樣的圖像。當頁面加載和第一張圖片被選中時，「在線錄取」div部分背景色（＃034121）與其他4 div背景色（＃007f3d）不同。

而當第二圖像被運行，則「接納測試結果」分區部分的背景色變化到（＃034121）該顏色和其他4格的背景顏色變爲這種顏色（＃007f3d）。

這是所有其他圖像和div的連續過程。贊成圖像表明那些圖像的div元素。

我是JavaScript的初學者。所以，我不明白怎麼能解決這個問題。

這裏的引導工作示例鏈接：http://www.bootply.com/NSXQJ8Xmy6

Answer 1

Updated bootply

基本上，你需要利用slid.bs.carousel事件的bootstrap-carousel，並獲取當前carousel slide的指數，與指數找到div element您的#hot_news元素在div.row下，並將active類添加到它。同時，在添加之前，從div.row下的所有其他divs中刪除active class。

以下是你如何做到這一點。

$('#carousel-example-generic').on('slid.bs.carousel', function (e) { 
    var currentIndex = $(e.relatedTarget).index(); 
    $("#hot_news .row div.active").removeClass('active'); 
    $("#hot_news .row div").eq(currentIndex).addClass('active'); 
}); 

$(document).ready(function(){ 
    $("#hot_news .row div").eq(0).addClass('active'); //add to 0 by default on page load 
}); 

CSS

#hot_news .active{ 
    background-color: #034121; 
}