在bootstrap tabing上滾動添加課程

Question

我需要一個小小的幫助，在bootstrap tabbing carousal的滾動中添加一個課程。 所以這裏是我的網頁的URL

當我從tabing任何一點點擊喜歡1,2,3 ..活躍類是對同一tabing補充說是完美的我用這個腳本是

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

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

它正在工作完美，因爲類正在li.active上添加，但我也希望當前選項卡上的.active類當我滾動選項卡容器中。我已經添加滾動碼和工作完美的，但需要類中的.tab李加當我滾動

這裏是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中刪除課程，然後將活動課程添加到下一個課程中，如下所示

$('#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已經完成..