1

同じページの切り替えに Bootstrap ピルを使用しています。2 つのナビゲーション ピルと、それぞれに対応する 2 つの div があります。最初の div を正しく作成し、正常に動作しています。しかし、2 番目の div を構築しようとすると、最初の div の内容が 2 番目の div の構築を妨げています。例: col-* クラスが正しく機能していません。要するに、最初の div のデータは、目に見えませんが、2 番目のページにいるときにまだ存在しています。

<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

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 に答える