Question

我有下一个用于实现 bootstrap选项卡的html，但是它们没有切换

<div class="form-group">
  <div class="row voffset2">

    <ul class="nav nav-tabs" runat="server">
      <li class="active">
        <a data-toggle="tab" href="#divOutcomeDetails">Outocme Details</a>
      </li>
      <li>
        <a data-toggle="tab" href="#divOutcomeDocument">Documents</a>
      </li>
    </ul>

    <div class="tab-content">
      <div id="divOutcomeDetails" class="tab-pane fade in active">
        Hello
      </div>
      <div id="divOutcomeDocument" class="tab-pane fade">
        Hiiii
      </div>
    </div>

  </div>
</div>

我尝试了很多不同的方法来修复它，但是它们并没有切换。这是一个非常简单的代码，但不确定为什么不起作用。谁能帮我吗？

Answer 1

我为您提供了一个可行的示例，您的问题是：

1）您忘了包括所有角色属性。

2）包装类行与导航样式不兼容。

3）您忘记了 li 标记和<<导航项和导航链接的所有类分别是strong> a 标签。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="form-group">

    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#divOutcomeDetails" role="tab">
          Outcome Details
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#divOutcomeDocument" role="tab">
          Documents
        </a>
      </li>
    </ul>

    <div class="tab-content">
      <div id="divOutcomeDetails" class="tab-pane fade show active" role="tabpanel">
        Hello
      </div>
      <div id="divOutcomeDocument" class="tab-pane fade" role="tabpanel">
        Hiiii
      </div>
    </div>

  </div>
</div>

引导选项卡不切换

1 个答案: