如何使用javascript操纵列表位置

Question

我正在扩展bootstrap carousel插件，允许我使用图像作为缩略图导航器。我已经这样做但问题是如何显示活动列表（缩略图）

的CSS：

.carousel-wrap {
      overflow: hidden;
      margin: 0 auto;
      width: 408px;    
}
.carousel-indicators {
    position: relative;
    bottom: 0;
    width: 1000em
}

HTML：

<div id="slider1" class="carousel-wrap">
                 <ol class="carousel-indicators carousel-gallery">
                   <li data-target="#carousel-example-generic" data-slide-to="0" class="active"><img src="http://placehold.it/80x60&amp;text=one" class="img-responsive"></li>
                   <li data-target="#carousel-example-generic" data-slide-to="1" class=""><img src="http://placehold.it/80x60&amp;text=two" class="img-responsive"></li>
                   <li data-target="#carousel-example-generic" data-slide-to="2" class=""><img src="http://placehold.it/80x60&amp;text=three" class="img-responsive"></li>
                   <li data-target="#carousel-example-generic" data-slide-to="2" class=""><img src="http://placehold.it/80x60&amp;text=four" class="img-responsive"></li>
                   <li data-target="#carousel-example-generic" data-slide-to="2" class=""><img src="http://placehold.it/80x60&amp;text=five" class="img-responsive"></li>
                 </ol>
             </div>

Answer 1

这应该有效：

$('#slider1 li').on('click', function(){
// remove class 'active' from all li
$("#slider1 li").removeClass("active");
// add class 'active' to the clicked li
$(this).toggleClass('active');
})

将此JavaScript放在slider-HTML之前，并使用css为list元素设置样式，具体取决于.active类。