javascript - Bootstrap 图像滑动时更改 div 背景颜色

Question

我想做类似这张图片的东西。当页面加载并选择第一张图片时，“在线入场”div 部分背景颜色 (#034121) 不同于其他 4 div 背景颜色 (#007f3d)。

当第二张图片运行时，“准入测试结果”div 部分背景颜色更改为 (#034121) 这种颜色，其他 4 div 背景颜色变为这种颜色 (#007f3d)。

这是所有其他图像和 div 的连续过程。喜欢图像是表示那些图像的 div 元素。

我是 JavaScript 的初学者。所以，我不明白如何解决这个问题。

这里是 Bootstrap 工作示例链接:http://www.bootply.com/NSXQJ8Xmy6

Answer 1

Updated bootply

基本上，您需要利用 bootstrap-carousel 的 slid.bs.carousel 事件并获取当前 carousel slide 的索引，在 div.row 下的 #hot_news 元素中找到具有该索引的 div 元素 并将 active 类添加到它。同时，在添加之前，从 div.row 下的所有其他 div 中删除 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;
}