表中的引导导航药丸

Question

我想在表格中使用 Bootstrap Nav Pills，并在最后一个表格的行中使用“选项卡按钮”。 选项卡内容在表格之外。我试过了，但它不起作用。

https://jsfiddle.net/wxkd6r2q/

    <table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th></th>
      <td> <a data-toggle="tab" href="#home">BUTTON HERE</a>    </td>
      <td> <a data-toggle="tab" href="#profile">BUTTON HERE</a> </td>
      <td> <a data-toggle="tab" href="#contact">BUTTON HERE</a> </td>
    </tr>
  </tbody>
</table>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel">...home..</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...profile...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel">...contact...</div>
</div>

Answer 1

要让它工作：

• nav-tabs 和 tab-content 类需要是兄弟姐妹才能使其工作...这是通过将表格放入带有 nav-tabs 的 div 中以使其工作
• 另外，带有data-toggle="tab" 的DOM 元素必须是彼此的兄弟...所以我们将data-toggle="tab" 从<td> 内的<a> 移动到<td> 本身

工作 sn-p 如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="nav nav-tabs">

  <table class="table">
    <caption>List of users</caption>
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr class="nav nav-tabs">
        <th>3</th>
        <td data-toggle="tab" href="#home"> <a>BUTTON HERE</a> </td>
        <td data-toggle="tab" href="#profile"> <a>BUTTON HERE</a> </td>
        <td data-toggle="tab" href="#contact"> <a>BUTTON HERE</a> </td>
      </tr>
    </tbody>
  </table>
</div>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade active" id="home" role="tabpanel">...home..</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...profile...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel">...contact...</div>
</div>

根据提问者对先前代码的观察进行更新...