Javascript 引导导航丸-当第二个导航丸激活时，第一个导航丸数据仍然存在

我使用引导药片在同一页上切换。有两个导航丸和两个div分别对应于它们。我已经正确构建了第一个div，并且工作正常。但是当我试图构建第二个div时，第一个div的内容阻碍了第二个div的构建。例如：col-*类工作不正常。简而言之，第一个div的数据虽然看不见，但当我在第二页时仍然存在

<ul class="nav nav-pills container-fluid" style = "margin-left:10px;">
  <li class="active"><a href="#homeTab" data-toggle = "pill">Download Data</a></li>
  <li><a href="#metaTab" data-toggle = "pill">Metadata</a></li>
</ul>

<div class="container-fluid tab-content fade in active" id = "homeTab">
 ....    
</div>

<div class="container-fluid tab-content fade" id = "metaTab">
 ....    
</div>

....    
....    

只需包含bootstrap.js即可

.tab窗格{
位置：绝对位置；
前200px；
左：0；
}

....    第一
....    第二

您误用了选项卡内容。它应该缠绕在所有选项卡上，而选项卡应该具有选项卡窗格类，如下所示：

<ul class="nav nav-pills container-fluid" style = "margin-left:10px;">
  <li class="active"><a href="#homeTab" data-toggle = "pill">Download Data</a></li>
  <li><a href="#metaTab" data-toggle = "pill">Metadata</a></li>
</ul>

<div class="tab-content">
    <div role="tabpanel" class="container-fluid tab-pane fade in active" id = "homeTab">
    ...tab 1 content...
    </div>

    <div role="tabpanel" class="container-fluid tab-pane fade" id = "metaTab">
    ...tab 2 content...    
    </div>
</div>

…选项卡1内容。。。
…选项卡2内容。。。

---

以下是有关引导中选项卡的更多信息：

我更新了答案。。。。看一看，谢谢你。但现在只有药片在更换。演员们都不再换衣服了。是的，这就是我要做的事情。如果你运行代码，你会注意到第一个打印在顶部，而“第二个”打印在下面一行，这正是我面临的问题。你已经将上面的答案标记为正确@ShubhamGoyal你已经解决了这个问题，不是吗？如果我能让你投票，我会很高兴的@如果我可以的话，舒巴姆戈亚利会的。我的名声仍然很好。还是个初学者。很抱歉非常感谢Marek Kus！！工作得很好。我想不用tabpanel我们就可以用它。