1

我正在尝试在 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>
4

1 回答 1

1

认为您应该将 data-toggle="tab" 添加到 <li> <a>标签中，例如 

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

选项卡和滑块将起作用

于 2014-06-19T15:36:51.360 回答