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 =＆＃34; tab＆＃34;到了 <li> <a>个标签喜欢

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

标签和滑块可以使用

标签内的Twitter Bootstrap Carousel

1 个答案: