Question

此问题的基本视觉效果可在http://sevenx.de/demo/bootstrap-carousel/inc.carousel/tabbed-slider.html获得 - 如果您想查看它。

但这是正在发生的事情。

HTML＆amp;标签轮播后面的CSS在下面。（为了简洁起见，我只是缩短了它。）

<style>

    #myCarousel-100 .nav a small {
            display:block;
    }
    #myCarousel-100 .nav {
            background:#eee;
    }
    #myCarousel-100 .nav a {
            border-radius: 0px;
    }
</style>

<div class="container">

    <div id="myCarousel-100" class="carousel slide" data-ride="carousel">

        <div class="carousel-inner"><!-- Wrapper for slides -->

            <div class="item active">
                panel 1 content
            </div><!-- End Item -->

            <div class="item active">
                panel 2 content
            </div><!-- End Item -->

        </div><!-- /Wrapper for slides -->


        <ul class="nav nav-pills nav-justified">
            <li data-target="#myCarousel-100" data-slide-to="0" class="active"><a href="#">panel 1</a></li>
            <li data-target="#myCarousel-100" data-slide-to="1"><a href="#">panel 2</a></li>
        </ul>


    </div><!-- End Carousel -->
</div>

足够简单......

为了启动节目，我们所需要的只是在页脚上粘贴以下JS。前提是升降带和放大器jQuery也在，事情会有效。

<script>
        $('#myCarousel-100').carousel({
                interval:   4000 
        });

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

那就是它。

首先，这里的问题在哪里？嗯，没有。

嗯，有点......

只要你没有这样的标签式旋转木马，就没有问题了。

但是，假设您想要另一个实例，例如id为myCarousel-200。

那么，您可以只复制代码并将-100的每次出现更改为-200，您就可以了。对？没有。

除非发生onclick事件（在任何一个实例上），所有内容都会起作用，最后点击的一个 在其他CAROUSEL 中的点击外观也将受到影响。

因此，例如，您单击第一个轮播的面板2，您将看到面板2内容将加载到第一个轮播视图端口。面板2下面的链接将获得蓝色突出显示。到现在为止还挺好。

虽然如此，如果你点击 另一个滑块 的面板1或2，你会发现第一个旋转木马的最后点击项目＆＃ 39; s蓝色背景也会消失。那时，第一个旋转木马根本没有点击项目外观。你肯定不希望这种行为。

现在，为什么会这样？

发生这种情况是因为，JS代码有这样的调用;

 $('.nav li').removeClass('active');

这段代码编写得很糟糕，因为没有名称空间可以定位所需轮播中的nav li元素，只是将动作缩小到相关的轮播。

为了解决这个问题，我尝试了以下方法......但它没有用......

$('#myCarousel .nav li').removeClass('active');

我做错了什么？

Answer 1

尝试

$(this).closest('.nav').find('li').removeClass('active');

Answer 2

我不认为你接受的解决方案对你有好处。它实际上正在做相反的事情 - 将问题隐藏起来。

您在脚本中对两个轮播进行了更改。而不是例如$('.nav li')尝试$(this).find('.nav li')。一旦所有内容都以类似的方式进行，您就不需要为下一个创建多个$('#myCarousel-100').on('click'...块的轮播重复代码。

正确删除nav li的类

2 个答案: