Несколько целевых данных для вкладки bootstrap не работают

Question

Я пытаюсь создать навигационную панель, используя bootstrap 4, когда кликаешь на элементе навигации, переключает два деления. В других примерах я видел, что при использовании data-target вы можете добавить несколько # содержимого.

<a data-target="#tab-content-2, #cmcAGVL">

<nav>
<div class="nav nav-tabs" id="nav-home-tab" role="tablist">
<a class="nav-item nav-link active rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tab-content-1, #cmcVGVL" role="tab" aria-controls="nav-home" aria-selected="true">1</a>
        <a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tab-content-2, #cmcAGVL"  role="tab" aria-controls="nav-profile" aria-selected="false">2</a>
        <a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tab-content-1-1, #cmcIVGVL"  role="tab" aria-controls="nav-contact" aria-selected="false">Interieur 1</a>
        <a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tab-content-2-2, #cmcIAGVL" role="tab" aria-controls="nav-contact" aria-selected="false">Interieur 2</a>
        <a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tab-content-3-3, #cmcBG" role="tab" aria-controls="nav-contact" aria-selected="false">Begane grond</a>
        <a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tab-content-4-4, #cmcV1" role="tab" aria-controls="nav-contact" aria-selected="false">Eerste verdieping</a>
        <a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tab-content-5-5, #cmcV2" role="tab" aria-controls="nav-contact" aria-selected="false">Tweede verdieping</a>
        <a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tab-content-6-6, #cmcV3" role="tab" aria-controls="nav-contact" aria-selected="false">Derde verdieping</a>
        <div class="btn-group">
          <button type="button" class="nav-item nav-link rounded-0 dropdown-toggle" data-toggle="dropdown">Geselecteerde opties</button>
          <div class="dropdown-menu" id="insert">
        </div>
      </div>
    </nav>

  <div class="tab-content">
    <div class="tab-pane active home" id="tab-content-1" role="tabpanel" aria-labelledby="nav-home-tab"></div>
    <div class="tab-pane" id="tab-content-2"></div>
    <div class="tab-pane" id="tab-content-1-1" role="tabpanel" aria-labelledby="nav-home-tab"></div>
    <div class="tab-pane" id="tab-content-2-2" role="tabpanel" aria-labelledby="nav-home-tab"></div>
    <div class="tab-pane" id="tab-content-3-3"></div>
    <div class="tab-pane" id="tab-content-4-4"></div>
    <div class="tab-pane" id="tab-content-5-5"></div>
    <div class="tab-pane" id="tab-content-6-6"></div>

    <div class="tab-pane active" id="cmcVGVL"></div>
    <div class="tab-pane" id="cmcAGVL" >B</div>
    <div class="tab-pane" id="cmcIVGVL">C</div>
    <div class="tab-pane" id="cmcIAGVL">D</div>
    <div class="tab-pane" id="cmcBG">E</div>
    <div class="tab-pane" id="cmcV1">F</div>
    <div class="tab-pane" id="cmcV2">G</div>
    <div class="tab-pane" id="cmcV3">H</div>
</div>

Answer 1

Я нашел ответ в другой ветке;

Поместите несколько целевых данных в отдельный div, затем поместите различные вкладки в этот div

  <a class="nav-item nav-link active rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tabs-1" role="tab" aria-controls="nav-home" aria-selected="true">Voorgevel</a>

  <div class="tab-pane" id="tabs-1" role="tabpanel">
    <div class="tab-pane" id="tab-content-2"></div>
    <div class="tab-pane" id="cmcIAGVL"></div>
  </div>