jquery - 选项卡内的 Twitter Bootstrap Carousel

Question

我正在尝试在 Twitter Bootstrap 中创建 3 个选项卡，每个选项卡内都有不同的幻灯片。目前，第一个幻灯片播放，但其他幻灯片不起作用。我意识到这与两者之间的冲突和隐藏内容有关。 我看过类似的帖子，但找不到解决方案，非常感谢任何帮助使其正常运行的帮助。

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#industrial">Industrial</a></li>
    <li><a href="#digital-tech">Digital/Tech</a></li>
    <li><a href="#finance-professional">Finance/Professional</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="industrial">
        <div id="myCarousel1" class="carousel slide">
            <div class="carousel-inner">
                <div class="active item"><img src="http://placehold.it/350x150&text=1a"></div>
                <div class="item"><img src="http://placehold.it/350x150&text=1b"></div>
                <div class="item"><img src="http://placehold.it/350x150&text=1c"></div>
            </div>
            <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
    </div>

    <div class="tab-pane" id="digital-tech">
        <div id="myCarousel2" class="carousel slide">
            <div class="carousel-inner">
                <div class="active item"><img src="http://placehold.it/350x150&text=2a"></div>
                <div class="item"><img src="http://placehold.it/350x150&text=2b"></div>
                <div class="item"><img src="http://placehold.it/350x150&text=2c"></div>
            </div>
            <a class="carousel-control left" href="#myCarousel" data-slide="prev"> </a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
    </div>
    <div class="tab-pane" id="finance-professional">
        <div id="myCarousel3" class="carousel slide">
            <div class="carousel-inner">
                <div class="active item"><img src="http://placehold.it/350x150&text=3a"></div>
                <div class="item"><img src="http://placehold.it/350x150&text=3b"></div>
                <div class="item"><img src="http://placehold.it/350x150&text=3c"></div>
            </div>
            <a class="carousel-control left" href="#myCarousel" data-slide="prev"> </a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>        
        </div>
    </div>
</div>

Answer 1

认为您应该将 data-toggle="tab"添加到 <li> <a>标签 喜欢

<li><a data-toggle="tab" href="#digital-tech">Digital/Tech</a></li>

制表符和 slider 将起作用