在引导标签中滚动添加类

Question

我需要一个小的帮助，以便在引导标签轮播中滚动添加类。 所以这是我的页面网址

当我从1,2,3这样的选项卡上单击任何点时。活动类在选项卡上添加了一个完美的选项，我使用的是脚本

    $('#myCarousel').bind('mousewheel', function(e){$(this).carousel('next');});

$('.tab li').on('click', function(){
    $('li.active').removeClass('active');
    $(this).addClass('active');
});

它是完美的工作，因为类在li.active上添加，但是当我在标签容器中滚动时，我也希望当前标签上的.active类。 我已经添加了滚动代码并且工作完美，但是当我滚动时需要在.tab li中添加类

这也是HTML代码

<div class="tab">
<div class="container-tab">
<ul class="list-inline nav">
<li data-target="#myCarousel" data-slide-to="0" class="active"> <a href="#">
<div class="round-tab-num"> 1 </div>
<p>Working Smart <small>not harder</small> </p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="1"> <a href="#">
<div class="round-tab-num"> 2 </div>
<p>Working Smart <small>not harder</small> </p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="2"> <a href="#">
<div class="round-tab-num"> 3 </div>
<p>Working Smart <small>not harder</small> </p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="3"> <a href="#">
<div class="round-tab-num"> 4 </div>
<p>Working Smart <small>not harder</small></p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="4"> <a href="#">
<div class="round-tab-num"> 5 </div>
<p>Working Smart <small>not harder</small></p>
</a> </li>
</ul>
<!--The main div for carousel-->
<div id="myCarousel" class="carousel horizantal slide" data-interval="false"> 

<!-- Sliding images statring here -->
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<h3>test1</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test2</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test3</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test4</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test5</h3>
</div>
</div>
</div>

<!-- Next / Previous controls here -->

<div> </div>
</div>
</div>
</div>

此代码也被添加

$(document).ready( function() {
    $('#myCarousel').carousel({
        interval:   4000
    });

    var clickEvent = false;
    $('#myCarousel').on('click', '.container-tab .nav a', function() {
            clickEvent = true;
            $('.container-tab .nav li').removeClass('active');
            $(this).parent().addClass('active');        
    }).on('slid.bs.carousel', function(e) {
        if(!clickEvent) {
            var count = $('.container-tab .nav').children().length -1;
            var current = $('.container-tab .nav li.active');
            current.removeClass('active').next().addClass('active');
            var id = parseInt(current.data('slide-to'));
            if(count == id) {
                $('.container-tab .nav li').first().addClass('active'); 
            }
        }
        clickEvent = false;
    });
});

Answer 1

如下更改代码，只需从当前活动的li中删除类，然后将活动的类添加到下一个li中，如下所示

$('#myCarousel').bind('mousewheel', function(e) {
    $(this).carousel('next');
    var $currentlyactive =$('li.active');
    $currentlyactive.removeClass('active');
    $currentlyactive.next().addClass('active');
});

更新

$(document).ready(function() {      
   $('.carousel').carousel('pause');
});
$('#myCarousel').bind('mousewheel', function(e){$(this).carousel('next');});

$('.tab li').on('click', function(){
    $('li.active').removeClass('active');
    $(this).addClass('active');
});

这是您的html页面中的代码，删除所有与轮播相关的代码已在custom.js中完成。