幻灯片处于活动状态时，将传送带自定义按钮设置为活动状态

Question

我有一个经典的引导程序传送带，但进行了一些修改。基本上，您可以通过下面的图像看到，我有一个图表图像轮播。在旋转木马之上还有另一排自定义选择按钮（销售和门票）。

问题是我想将活动类添加到连接到该幻灯片的按钮上。下面我提供了html和jquery的图像。 HTML

jQuery的

代码HTML

$('#carousel-example-generic').on('slid.bs.carousel', function (event) { 
 
      var nextactiveslide = $(event.relatedTarget).index(); 
 
      var $btns = $('.custom-carousel-btns'); 
 
      var $active = $btns.find("[data-slide-to='" + nextactiveslide + "']"); 
 
      // alert(nextactiveslide); 
 
      $btns.find('.car-ind').removeClass('active'); 
 
      $active.find('.car-ind').addClass('active'); 
 
     });

/* Charts Carousel */ 
 
.carousel-inner > .item > img{ 
 
    margin: 0 auto; 
 
} 
 

 
.car-ind{ 
 
    color: grey; 
 
} 
 

 
.custom-carousel-btns .active{ 
 
    color: black; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
    <h3 class="panel-title"><i class="fa fa-long-arrow-right fa-fw"></i> Reports</h3><img src="" class="img-responsive panel-img"> 
 
    </div> 
 
    <div class="panel-body"> 
 
    <!-- Carousel Controls --> 
 
    <div class="row" style="border-bottom: 1px solid #eee; padding-bottom: 10px;"> 
 
     <div class="col-sm-2 custom-carousel-btns"> 
 
     <span><a href="#carousel-example-generic" class="car-ind active" role="button" data-slide-to="0">Sales</a></span> 
 
     <span><a href="#carousel-example-generic" class="car-ind" role="button" data-slide-to="1">Tickets</a></span> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"> 
 
     <!-- Wrapper for slides --> 
 
     <div class="carousel-inner" role="listbox"> 
 
      <div class="item active"> 
 
      <img src="http://via.placeholder.com/350x150" class="img-responsive" style="width: 100%; height: auto;" alt="..."> 
 
      </div> 
 
      <div class="item"> 
 
      <img src="http://via.placeholder.com/350x150" class="img-responsive" style="width: 100%; height: auto;" alt="..."> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

预先感谢您

Answer 1

试试这个： -

$('#carousel-example-generic').on('slid.bs.carousel', function (event) { 
     var nextactiveslide = $(event.relatedTarget).index(); 
     var $btns = $('.car-ind'); 
     $btns.removeClass('active'); 
     var $activeBtn = $("[data-slide-to='" + nextactiveslide + "']").addClass('active'); 
    }); 

$('#carousel-example-generic').on('slid.bs.carousel', function (event) { 
 
     var nextactiveslide = $(event.relatedTarget).index(); 
 
     var $btns = $('.car-ind'); 
 
     //var $active = $btns.find("[data-slide-to='" + nextactiveslide + "']"); 
 
     // alert(nextactiveslide); 
 
     $btns.removeClass('active'); 
 
     var $activeBtn = $("[data-slide-to='" + nextactiveslide + "']").addClass('active'); 
 
     // console.log($(".active", event.target).index()); 
 
     // $btns.find('.car-ind').removeClass('active'); 
 
     // $active.find('.car-ind').addClass('active'); 
 
    });

/* Charts Carousel */ 
 
.carousel-inner > .item > img{ 
 
    margin: 0 auto; 
 
} 
 

 
.car-ind{ 
 
    color: grey; 
 
} 
 

 
.custom-carousel-btns .active{ 
 
    color: black; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
    <h3 class="panel-title"><i class="fa fa-long-arrow-right fa-fw"></i> Reports</h3><img src="" class="img-responsive panel-img"> 
 
    </div> 
 
    <div class="panel-body"> 
 
    <!-- Carousel Controls --> 
 
    <div class="row" style="border-bottom: 1px solid #eee; padding-bottom: 10px;"> 
 
     <div class="col-sm-2 custom-carousel-btns"> 
 
     <span><a href="#carousel-example-generic" class="car-ind active" role="button" data-slide-to="0">Sales</a></span> 
 
     <span><a href="#carousel-example-generic" class="car-ind" role="button" data-slide-to="1">Tickets</a></span> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"> 
 
     <!-- Wrapper for slides --> 
 
     <div class="carousel-inner" role="listbox"> 
 
      <div class="item active"> 
 
      <img src="http://via.placeholder.com/350x150" class="img-responsive" style="width: 100%; height: auto;" alt="..."> 
 
      </div> 
 
      <div class="item"> 
 
      <img src="http://via.placeholder.com/350x150" class="img-responsive" style="width: 100%; height: auto;" alt="..."> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>