1

我正在使用 Bootstrap 丸在同一页面上切换。有两个导航药丸和两个对应于它们的 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>
4

2 回答 2

1

您正在滥用tab-content类。它应该包裹在所有选项卡周围，并且选项卡应该有tab-pane类，如下所示：

<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>

以下是有关引导程序中选项卡的更多信息：http: //getbootstrap.com/javascript/#tabs

于 2016-06-15T07:03:15.973 回答
1

你只需要包含 bootstrap.js

.tab-pane{
  position:absolute;
  top 200px;
  left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

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

<div class="tab-pane fade in active" id = "homeTab">
 ....    FIRST
</div>

<div class="tab-pane fade" id = "metaTab">
 ....    SECOND
</div>

于 2016-06-15T06:56:26.940 回答