Twitter bootstrap 3 引导转盘：滑块下的更改部分

我有一个典型的引导旋转木马，有三到四张幻灯片，我遇到的问题是，每当出现新幻灯片时，我希望滑块下的部分发生变化。我试着用下面的“折叠”来隐藏该部分并显示正确的部分：

默认情况下，此div（Foo）是隐藏的

…下一张幻灯片是“foo2”，然后是“foo3”等等。。。问题在于，这似乎不适用于多张幻灯片

理想情况下，我希望底部淡出，然后淡入一个与幻灯片id对应的div id

---

这可能吗？

此简单代码显示和隐藏引导转盘下的文本，具体取决于活动幻灯片

您可以按类为幻灯片-设置可折叠的

div

s。在我的示例中，幻灯片4没有可折叠的

div

。幻灯片1和3使用相同的

div

请检查结果

$（文档）.ready（函数（）{
$（#myCarousel'）。on（'slide.bs.carousel'，函数（e）{
var forSlide=$（'.对于幻灯片-'+$（e.relatedTarget）.index（））；
if（！forSlide.hasClass（'in'））{
$（'#collapseGroup>.collapse.in'）.collapse（'hide'）；
崩塌（“显示”）；
}
})
});
@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.carousel-inner>.item>img{
宽度：100%；
}
.集装箱{
填充顶部：20px；
垫底：20px；
}
.嗯{
利润率：20px0；
}






标题0
标题1
标题2
标题3
标题4
幻灯片0的文本
幻灯片1和3的文本
幻灯片2的文本
看起来很棒。但是我应该把代码的第一部分放在哪里呢？在bootstrap.js中？或者直接在index.html中？代码shippet的第一部分是javascript。将其包装在标签
和
中。并将其全部放在
index.html
的
body
部分的末尾，就在标记
之前。看。
<a href="#Foo" class="btn btn-default" data-toggle="collapse">Toggle Foo</a>

<div id="Foo" class="collapse">
    This div (Foo) is hidden by default
</div>