Bootstrap 4 навигационные таблетки не работают

     <!-- Bootstrap pills -->
                <ul class="nav nav-pills">
                    <li class="active">
                    <a data-toggle="pill" href="driver-details-tab">Driver Details</a>
                    </li>
                    <li>
                    <a data-toggle="pill" href="#erer">Register Driver</a>
                    </li>
                </ul>
<div class="tab-content">
          <div class="container-fluid drivers-main tab-pane active" id="driver-details-tab" role="tabpanel">
 <div class="tab-pane" id="register-driver-tab" role="tabpanel">
              asdsdd
          </div>
                      <div class="container-fluid drivers-main tab-pane active" id="erer" role="tabpanel">
 <div class="tab-pane" id="register-driver-tab" role="tabpanel">
ffffffffffffffffffffffffffff
          </div>
  </div>

Здравствуйте, я использую nav-pills в bootstrap, но по какой-то причине он не работает должным образом. Пожалуйста, посмотрите на код выше, я не включил bootstrap в вышеупомянутую скрипку

Источник

3 ответа

Решение

Используйте что-то вроде этого для таблеток:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="pill" href="#driver-details-tab">Driver Details</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="pill" href="#erer">Register Driver</a>
  </li>
</ul>

Обратите внимание на классы, которые я добавил.

Источник 
<ul class="nav nav-pills">
                <li class="nav-item">
                <a class="nav-link active" data-toggle="pill" href="#driver-details-tab">Driver Details</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#erer">Register Driver</a>
                </li>
            </ul>
    <div class="tab-content">        
      <div class="container-fluid drivers-main tab-pane active" id="driver-details-tab" role="tabpanel">
          asdsdd
      </div>
      <div class="container-fluid drivers-main tab-pane active" id="erer" role="tabpanel"> fff</div>
    </div>

Проверь это! Не забудьте также включить знак # перед именем id в href!

Источник

JSFIDDLE

Bootstrap 3 или 4

Если CSS не работает, используйте JavaScript для навигации. (Если не работает только CSS)

<!-- Bootstrap pills -->
<ul class="nav flex-column" id="v-pills-tab">
<li class="active">
<a data-toggle="pill" href="driver-details-tab">Driver Details</a>
</li>
<li>
<a data-toggle="pill" href="#erer">Register Driver</a>
</li>
</ul>
<div class="tab-content">
<div class="container-fluid drivers-main tab-pane active" id="driver-details-tab" role="tabpanel">
<div class="tab-pane" id="register-driver-tab" role="tabpanel">
asdsdd
</div>
<div class="container-fluid drivers-main tab-pane active" id="erer" role="tabpanel">
<div class="tab-pane" id="register-driver-tab" role="tabpanel">
ffffffffffffffffffffffffffff
</div>
</div>

<script>
$('#v-pills-tab a').on('click', function (e) {
    e.preventDefault();
  $(this).tab('show')
})

</script>
Источник

Вам просто нужно импортировать сценарии Javascript, используемые Bootstrap 4, в свой HTML-заголовок.

<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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
Источник
Другие вопросы по тегам