当引导图像滑动时更改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; 
}