Question

我需要一个小帮助，在bootstrap tabbing carousal中添加一个滚动类。所以这是我的页面网址

当我点击像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，但当我在tab容器中滚动时，我也想要当前选项卡上的.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 中完成..

在bootstrap Tabing中滚动添加类

1 个答案: