Bootstrap nav pills - 当第二个 nav pill 激活时,第一个 nav pill 数据仍然存在
Bootstrap nav pills- first nav pill data still there when 2nd nav pill active
我正在使用 Bootstrap 药丸在同一页面上切换。有两个导航丸和两个 div 对应于每个 them.I 已经正确构建了第一个 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-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>
您在滥用 tab-content class。它应该环绕所有选项卡,并且选项卡应该有 tab-pane class 相反,像这样:
<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>
这里有更多关于 bootstrap 中的选项卡的信息:http://getbootstrap.com/javascript/#tabs
我正在使用 Bootstrap 药丸在同一页面上切换。有两个导航丸和两个 div 对应于每个 them.I 已经正确构建了第一个 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-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>
您在滥用 tab-content class。它应该环绕所有选项卡,并且选项卡应该有 tab-pane class 相反,像这样:
<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>
这里有更多关于 bootstrap 中的选项卡的信息:http://getbootstrap.com/javascript/#tabs