Question

我的分页活跃课程有一个奇怪的事情

我想在幻灯片更改时更改活动状态，但之前的活动状态没有变化。

如何解决这个问题？

感谢）

代码：

<div class="container">
  <div id="carousel" class="carousel slide" data-interval="false" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img class="img-responsive center-block" src="http://www.w3schools.com/bootstrap/img_chania.jpg">
      </div>
      <div class="item">
        <img class="img-responsive center-block" src="http://www.w3schools.com/bootstrap/img_flower.jpg">
      </div>
      <div class="item">
        <img class="img-responsive center-block" src="http://www.w3schools.com/bootstrap/img_chania2.jpg">
      </div>
    </div>
    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
<!-- /Carousel -->
<!-- Navigation -->
<center>
  <div class="container">
    <nav>
      <ul class="pagination">
        <li class="active s1" data-target="#carousel" data-slide-to="0"><a>1<span class="sr-only">(current)</span></a></li>
        <li class="s2" data-target="#carousel" data-slide-to="1"><a>2<span class="sr-only">(current)</span></a></li>
        <li class="s2" data-target="#carousel" data-slide-to="2"><a>3<span class="sr-only">(current)</span></a></li>
      </ul>
    </nav>
  </div>
</center>

$(document).ready(function() {
  $('#carousel').on('slide.bs.carousel', function(e) {
    var idx = $(e.relatedTarget).index();
    $('[data-slide-to=' + idx + ']').button('toggle');
  });
});

Answer 1

在toggle之前删除分页的每个按钮上的“有效”类：

$(document).ready(function() {
  $('#carousel').on('slide.bs.carousel', function(e) {
    var idx = $(e.relatedTarget).index();        
    $('.pagination li').removeClass('active');
    $('[data-slide-to=' + idx + ']').button('toggle');    
  });
});

FIDDLE

Bootstrap主动分页类错误

1 个答案: