navbar没有显示任何东西

我想要一个带有3个链接的导航栏。在每个标签中，我想显示一张表，当我点击另一个链接时，我想显示另一张表。navbar没有显示任何东西

我试图用下面的代码来做到这一点，但它不工作。我没有在页面上显示任何内容。

你明白为什么它不起作用吗？

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>

https://jsfiddle.net/z2kLaxaj/

来源

2016-10-12 Azz

您需要的JavaScript代码。 –

您需要链接到jQuery，控制台中出现错误“未捕获的错误：Bootstrap的JavaScript需要jQuery” – Jeff

你的语法是有点过了 - 而你在你的提琴失踪的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>

来源

2016-10-12 18:59:43 NickyTheWrench

感谢您的帮助。这真的是这个问题。 – Azz

navbar没有显示任何东西

回答

相关问题