Отключить вкладку навигации с помощью Bootstrap

Question

У меня есть 3 вкладки и соответствующие панели, созданные с помощью Bootstrap.

<ul class="nav nav-pills" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link" id="tab-A" data-toggle="pill" href="#A" role="tab">tab A</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab-B" data-toggle="pill" href="#B" role="tab">tab B</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab-C" data-toggle="pill" href="#C" role="tab">tab C</a>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade border rounded p-3" id="A" role="tabpanel" style="background-color: #CCE5FF;border-radius:25px;">
  pane A
  </div>
  <div class="tab-pane fade border rounded p-3" id="B" role="tabpanel" style="background-color: #CCE5FF;border-radius:25px;">
  pane B
  </div>
  <div class="tab-pane fade border rounded p-3" id="C" role="tabpanel" style="background-color: #CCE5FF;border-radius:25px;">
  pane C
  </div>
</div>

Каждая кнопка вкладки активируется при нажатии, а предыдущая кнопка деактивируется. Но нет возможности отключить все кнопки. Или, по крайней мере, пока не нашел.

Итак, я хотел бы реализовать поведение переключателя для кнопок вкладок, чтобы при нажатии активная кнопка вкладки отключалась, а соответствующая панель скрывалась.

Я пробовал это:

$('.nav-link').on('click', function (e) {
  var pill = $(this);
  if (pill.hasClass('active')) {
    e.preventDefault();
    pill.removeClass('active');
    var id = $(this).attr("href");
    var tab = $(id);
    tab.removeClass('active').removeClass('show');
  }
});

... но не смог достичь желаемого поведения ...

Вот полный пример кода https://jsfiddle.net/09Lk2zcp/

Есть идеи?

Answer 1

Самый простой способ - переопределить стиль начальной загрузки:

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #000;
  background-color: #ff0000;
}

Поместите его после включения начальной загрузки