Переключить стиль в навигационной вкладке Bootstrap 4 - PullRequest
0 голосов
/ 29 сентября 2018

Я пытался стилизовать nav-tabs, чтобы при выборе вкладка current всегда имела другой вид.Я настроил этот минимальный файл для тестирования.При нажатии на вкладку содержимое изменяется правильно, но я не могу понять, как применить стили CSS к текущей выбранной вкладке.

Я что-то не так делаю в файле?И есть ли простой способ выполнить стилизацию (например, изменить цвет фона активной вкладки), учитывая текущие ресурсы, вызываемые этим документом?Моя цель - сохранить минимальный размер проекта без использования дополнительного JavaScript.

<div class="container">
  <ul class="nav nav-tabs nav-justified">
    <li class="nav-item active">
      <a href="#first10" data-toggle="tab">First</a>
    </li>
    <li class="nav-item">
      <a href="#second10" data-toggle="tab">Second</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="first10" class="tab-pane active">
      <h2>First</h2>
    </div>
    <div id="second10" class="tab-pane">
      <h2>Second</h2>
    </div>
  </div>
</div>


<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://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.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Ответы [ 2 ]

0 голосов
/ 29 сентября 2018

Оказалось, что Bootstrap 4 по умолчанию предоставляет способ сделать именно то, что я хотел.Это окончательная версия исходного сообщения.

  • Удален "активный" из <li> element
  • Добавлен класс "nav-item" в <li> якоря
  • Добавлен "активный" класс для первого <li> anchor
  • Добавлены классы "fade" и "show" для первого "tab-pane" <div>
  • Добавлен класс "fade" длявторая "панель вкладок" <div>

Два использования класса "fade" не были строго обязательны, но добавили тонкий эффект.

<div class="container">
  <ul class="nav nav-tabs nav-justified">
    <li class="nav-item">
      <a class="nav-link active" href="#first10" data-toggle="tab">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#second10" data-toggle="tab">Second</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="first10" class="tab-pane fade show active">
      <h2>First</h2>
    </div>
    <div id="second10" class="tab-pane fade">
      <h2>Second</h2>
    </div>
  </div>
</div>

<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://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.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
0 голосов
/ 29 сентября 2018

Добавьте класс с вашим предпочтительным стилем к событию щелчка на вкладке.

Дайте конкретные идентификаторы вашей вкладки, такие как #Tab1 и #Tab2

Попробуйте:

$('#Tab1').on('click', function () {
   $('#Tab1').addClass('active');
   $('#Tab2').removeClass('active');
});

Затем сделайте обратное для второй вкладки.

$('#Tab2').on('click', function () {
   $('#Tab2').addClass('active');
   $('#Tab1').removeClass('active');
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...