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>

Я создал два столбца, один из которых содержит ссылки, а другой - область, в которой должны отображаться данные в соответствии с нажатой ссылкой. При запуске код фактически работает один раз, то есть, когда ссылки нажимаются впервые, он показывает соответствующий контент справа. Но когда я пытаюсь получить доступ к другой ссылке, она не работает. Это работает только один раз. Что я должен сделать, чтобы они работали независимо от того, сколько раз я хочу переключаться между данными?

Answer 1

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

Пожалуйста, проверьте это решение, надеюсь, оно работает для вас.

Answer 2

Вы не добавили контейнер списка nav nav-tabs для своих nav-tabs. Прямо сейчас все ваши ссылки работают как независимая внутренняя ссылка. Следовательно, это работает всего за один клик.

Вот код обновления

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

Сообщите мне, соответствует ли оно вашим требованиям.