Bootstrap 选项卡在多次单击时不会更改内容

Question

我一直在尝试在我的一个页面中实现制表符。代码如下

<div class="row justify-content-between">
    <div class="col-lg-3">
        <a class="nav-link p-3 mb-2 sidebar-link justify-content-between text-success ml-4" href="#1" data-toggle="tab">
            <h4 class="text-success size">Vehicles</h4>
        </a>
        <a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#2" data-toggle="tab">
            <h4 class="text-success size">Battery</h4>
        </a>
        <a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#3" data-toggle="tab">
            <h4 class="text-success size">Charging</h4>
        </a>
    </div>

    <div class="tab-content  col-lg-9">
        <div class="tab-pane active" id="1">
            <!-- Content here -->
        </div>

        <div class="tab-pane" id="2">
            <!-- content here -->
        </div>

        <div class="tab-pane" id="3">
            <!-- content here -->
        </div>
    </div>
</div>

我所做的是，我创建了两列，一列包含 link，另一列包含应根据单击的 link 显示数据的区域。当运行时，代码实际工作一次，即第一次点击link时，右侧显示相应的内容。但是当我尝试访问另一个 link 时，它不起作用。它只能工作一次。无论我想在数据之间切换多少次，我应该怎么做才能使它们正常工作？

Answer 1

您没有为导航标签添加 'nav nav-tabs' 列表容器。现在你所有的 link 都作为一个独立的内部 link 工作。因此，只需单击一下即可。

这是更新代码


<div class="row justify-content-between">
    <div class="col-lg-3">
<ul class="nav nav-tabs">
        <li class="active"><a class="nav-link p-3 mb-2 sidebar-link justify-content-between text-success ml-4" href="#1" data-toggle="tab">
            <h4 class="text-success size">Vehicles</h4>
        </a>
</li>

<li>
        <a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#2" data-toggle="tab">
            <h4 class="text-success size">Battery</h4>
        </a>
</li>
<li>
        <a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#3" data-toggle="tab">
            <h4 class="text-success size">Charging</h4>
        </a>
</li>
    </div>

    <div class="tab-content  col-lg-9">
        <div class="tab-pane fade in active" id="1">
            <!-- Content here -->
        </div>

        <div class="tab-pane fade" id="2">
            <!-- content here -->
        </div>

        <div class="tab-pane fade" id="3">
            <!-- content here -->
        </div>
    </div>
</div>

如果符合您的要求，请告诉我。

Answer 2

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>




<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <nav>
        <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
          <a class="nav-item nav-link active " role="tab" aria-selected="true" href="#1" data-toggle="tab">
            <h4 class="text-success size">Vehicles</h4>
          </a>
          <a class="nav-item nav-link " href="#2" role="tab" aria-selected="false" data-toggle="tab">
            <h4 class="text-success size">Battery</h4>
          </a>
          <a class="nav-item nav-link " href="#3" role="tab" aria-selected="false" data-toggle="tab">
            <h4 class="text-success size">Charging</h4>
          </a>
        </div>
      </nav>
  <div class="tab-content">
        <div class="tab-pane active" id="1">
          <!-- Content here -->
          <h1>Hello</h1>
        </div>
        <div class="tab-pane" id="2">
          <!-- content here -->
          <h1>hi</h1>
        </div>
        <div class="tab-pane" id="3">
          <!-- content here -->
          <h1>why</h1>
        </div>
      </div>
    </div>
  </div>
</div>

请检查这个解决方案，希望它对你有用。

Bootstrap 选项卡在多次单击时不会更改内容

Bootstrap tabs not changing the content when clicked more than once

html

css

bootstrap-tabs

bootstrap-4