導航欄未顯示任何內容
[英]navbar isn't showing anything
問題描述
我正在嘗試使用3個鏈接的導航欄。 在每個選項卡中，我想顯示一個表，當我單擊另一個鏈接時，我想顯示另一個表。
我正在嘗試使用下面的代碼執行此操作，但是它不起作用。 我沒有在頁面上顯示任何內容。
您了解為什么它不起作用嗎？
的HTML：
<body>
<div class="container">
<div class=".md-xs-4">
<ul class="nav nav-pills">
<li>
<a href="#Table">Table Link</a>
</li>
<li>
<a href="#Table2">Tabl2 Link</a>
</li>
</ul>
</div>
<div class=".md-xs-4">
<div class="tab-content">
<div class="tab-pane fade" id="Table">
<table class="table" style="border: 1px solid #ddd;">
<td>a</td>
<td>b</td>
</table>
<div class="tab-content">
<div class="tab-pane fade" id="Table2">
<table class="table" style="border: 1px solid #ddd;">
<td>a</td>
<td>b</td>
</table>
</div>
</div>
</div>
</body>
1 個解決方案
解決方案1
1 已采納 2016-10-12 18:59:43
您的語法有些不正確-而且您的小提琴中缺少jQuery。 在加載bootstrap.js之前，將以下代碼添加到您的<head> ：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
而且您的代碼應如下所示：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <ul class="nav nav-pills"> <li class="active"><a data-toggle="pill" href="#table1">Table Link</a> </li> <li><a data-toggle="pill" href="#table2">Table Link 2</a> </li> </ul> <div class="tab-content"> <div id="table1" class="tab-pane fade in active"> <table class="table" style="border: 1px solid #ddd;"> <td>a</td> <td>b</td> </table> </div> <div id="table2" class="tab-pane fade"> <table class="table" style="border: 1px solid #ddd;"> <td>a</td> <td>b</td> </table> </div> </div> </div>
為什么導航欄無法在Bootstrap中正確顯示？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.