多次单击时，引导选项卡不会更改内容

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>

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

Answer 1

您没有为您的导航标签添加“导航导航标签”列表容器。现在，您的所有链接都作为独立的内部链接工作。因此，它只需单击一下即可。

这里是更新代码

<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>

请检查此解决方案，希望它对您有用。