bootstrap模式选项卡不更改内容

Question

我在一个html文件中有多个模态用于我的Rails应用程序，2个模态在其中有选项卡。我面临的问题是，对于其中一个模式，当我点击它们时，标签不会改变内容。我知道它不是模态特定的问题，因为我意识到如果我移动代码（将一个模态放在另一个模式之前），标签可以工作，但一次只能用于一个模态。

具体来说，问题在于showModal和addStudent，如果我在addStudent之前放了任何东西，那个模态工作的标签，但addStudent标签不起作用。如果我把模态放在后面，反之亦然。我似乎无法弄清楚如何解决这个问题或为什么会发生这种情况。以下是代码的折叠版本：

<!-- Birthday Modal -->
<div class="modal fade" id="birthday" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

<!-- Reports Modal -->
<div class="modal fade" id="reports" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

<!-- addStudent modal -->
<div class="modal fade" id="addStudent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

<!-- Show Modal -->
<div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

<!-- Support Modal -->
<div class="modal fade" id="support" role="dialog">

Answer 1

你能为你的问题制作一个codepen或jsfiddle吗？为您自定义答案确实很有帮助。