Bootstrap: Как отобразить 2 вкладки, нажав на одну вкладку?

Question

У меня есть страница с 2 вкладками.

Я хочу, чтобы на вкладке pills-public отображалось:

• ОБЩЕСТВЕННЫЙ БЛОК 1

Я хочу, чтобы на вкладке pills-private отображалось:

• ЧАСТНЫЙ БЛОК 2
• ЧАСТНЫЙ БЛОК 1

Обратите внимание, что контент 2 PRIVATE не находится в одном регионе.

Как это сделать? Код ниже не работает ...

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link" id="pills-public-tab" data-toggle="pill" href="#pills-public" role="tab" aria-controls="pills-public" aria-selected="false">PUBLIC</a>
  </li>
  <li class="nav-item">
    <a class="nav-link active" id="pills-private-tab" data-toggle="pill" href="#pills-private" role="tab" aria-controls="pills-private" aria-selected="true">PRIVATE</a>
  </li>
</ul>
<div class="region-top">
  <div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-private" role="tabpanel" aria-labelledby="pills-private-tab">PRIVATE BLOCK 2</div>
  </div>
</div>
<div class="region-bottom">
  <div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade" id="pills-public" role="tabpanel" aria-labelledby="pills-public-tab">PUBLIC BLOCK 1</div>
    <div class="tab-pane fade show active" id="pills-private" role="tabpanel" aria-labelledby="pills-private-tab">PRIVATE BLOCK 1</div>
  </div>
</div>

Answer 1

У вас не может быть нескольких элементов HTML с одинаковыми идентификаторами ... если вы это сделаете, будет выбран только первый - мы добавим наши пользовательские классы pillsPrivateClass и pillsPublicClass, чтобы обойти это;class="tab-content" следует использовать в коде только один раз;с начальной загрузкой 4 (из коробки) даже после переупорядочения элементов, как я сделал, 2 вкладки не будут переключаться одним щелчком мыши .. поэтому нам пришлось бы использовать jQuery для переключения / отмены любых дополнительных элементов div...

$(document).ready(function() {
  $(".nav-link").click(function() {
    if ($(this)[0].id == 'pills-private-tab') {
      $(".pillsPrivateClass").each(function() {
        if ($(this).hasClass('active')) { /* */ } else {
          $(this).addClass('active');
          $(this).addClass('show');
        }
      });
      $(".pillsPublicClass").each(function() {
        if ($(this).hasClass('active')) {
          $(this).removeClass('active');
          $(this).removeClass('show');
        }
      });
    } else {
      $(".pillsPrivateClass").each(function() {
        if ($(this).hasClass('active')) {
          $(this).removeClass('active');
          $(this).removeClass('show');
        }
      });
    }
  });
})

.pillsPrivateClass:not(.active) {
  display: none
}

.pillsPublicClass:not(.active) {
  display: none
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link" id="pills-public-tab" data-toggle="pill" href="#pills-public" role="tab" aria-controls="pills-public" aria-selected="false">PUBLIC</a>
  </li>
  <li class="nav-item">
    <a class="nav-link " id="pills-private-tab" data-toggle="pill" href="#pills-private" role="tab" aria-controls="pills-private" aria-selected="false">PRIVATE</a>
  </li>
</ul>
<div class="tab-content">
  <div class='region-top'>
    <div id="pills-private" class=" tab-pane  pillsPrivateClass" role="tabpanel" aria-labelledby="pills-private-tab">
      PRIVATE BLOCK 2
    </div>
  </div>
  <div class='region-bottom'>
    <div id="pills-public" class=" tab-pane  pillsPublicClass" role="tabpanel" aria-labelledby="pills-private-tab">
      PUBLIC BLOCK 1
      <br/>
    </div>
    <div id="pills-private" class=" tab-pane  pillsPrivateClass" role="tabpanel" aria-labelledby="pills-private-tab">
      PRIVATE BLOCK 1
    </div>
  </div>
</div>