Question

我试图拥有一个包含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>

https://jsfiddle.net/z2kLaxaj/

Answer 1

你的语法有点偏离 - 而你在小提琴中缺少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>

导航栏没有显示任何内容

1 个答案: