启动活动分页类错误

Bootstrap Active Pagination Class Error

本文关键字：错误 分页 活动 启动      更新时间：2023-09-26

我的分页活动类有一件奇怪的事情

我想在幻灯片更改时更改活动状态，但以前的活动位置没有更改。

如何解决这个问题？？

这是模板

谢谢）

代码：

<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');
  });
});

删除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

相关文章：