Bootstrap 4: две вертикальные закладки таблеток синхронизируют соседние активные вкладки

Question

Заголовок, вероятно, очень запутанный, так как не мог придумать подходящих слов, чтобы описать это, и, следовательно, также испытывал проблемы с поиском решений.

На этой странице: https://getbootstrap.com/docs/4.4/components/navs/

С помощью каркаса можно легко создавать вертикальные вкладки. Тем не менее, я также ищу вкладки справа от контента, который контролирует контент в середине. Еще раз, не сложно, так как вы можете просто скопировать код пилюли слева и добавить в строку справа.

Проблема в том, что если я выберу, скажем, 2-й элемент слева, то на соседней вкладке ( 2-й справа), чтобы также стать активным. Или, если я выберу третий элемент справа, например, третий элемент слева также станет активным. Вот так:

Хотите использовать как можно больше нативного кода Bootstrap 4, но при условии, что это не собственный способ достижения sh, затем предположительно jquery, чтобы сохранить активный класс соседней таблетки в синхро c. Или, если есть имя для этого метода проектирования, чтобы я мог лучше его найти.

Также, хотя стандартный код вкладки можно увидеть на связанной странице bootstrap, также вставленной ниже моей модифицированной версии с тремя столбцами который работает, за исключением сохранения активного класса соседней вкладки в syn c, как отмечено:

<div class="row">
    <div class="col-4">
      <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <a class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="false">Dog</a>
        <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Cat</a>
        <a class="nav-link active" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="true">Snake</a>
        <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Spider</a>
      </div>
    </div>
    <div class="col-4">
      <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
          <p>Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.</p>
        </div>
        <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
          <p>Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.</p>
        </div>
        <div class="tab-pane fade active show" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
          <p>Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.</p>
        </div>
        <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
          <p>Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.</p>
        </div>
      </div>
    </div>
<div class="col-3">
      <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <a class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="false">Lab</a>
        <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Siamese</a>
        <a class="nav-link active" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="true">Python</a>
        <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Black Widow</a>
      </div>
    </div>

  </div>

Answer 1

Мы можем trigger соответствующую кнопку в соответствующем столбце при каждом нажатии ... просто нужно убедиться, что мы не застряли в oop, поэтому мы вводим setTimeout, поскольку bootstrap . js требуется некоторое время для установки / редактирования классов

Это, мы надеемся, даст вам то, к чему вы стремитесь ...

Рабочий фрагмент ниже:

$(document).ready(() => {
  var TimeOutNumber = 10;

  $('#v-pills-dog').click(() => {
    setTimeout(() => {
      $('#v-pills-dog2').hasClass('active') ? '' : $('#v-pills-dog2').trigger('click');
    }, TimeOutNumber);
  });
  $('#v-pills-dog2').click(() => {
    setTimeout(() => {
      $('#v-pills-dog').hasClass('active') ? '' : $('#v-pills-dog').trigger('click');
    }, TimeOutNumber);
  });

  $('#v-pills-cat').click(() => {
    setTimeout(() => {
      $('#v-pills-cat2').hasClass('active') ? '' : $('#v-pills-cat2').trigger('click');
    }, TimeOutNumber);
  });
  $('#v-pills-cat2').click(() => {
    setTimeout(() => {
      $('#v-pills-cat').hasClass('active') ? '' : $('#v-pills-cat').trigger('click');
    }, TimeOutNumber);
  });

  $('#v-pills-snake').click(() => {
    setTimeout(() => {
      $('#v-pills-snake2').hasClass('active') ? '' : $('#v-pills-snake2').trigger('click');
    }, TimeOutNumber);
  });
  $('#v-pills-snake2').click(() => {
    setTimeout(() => {
      $('#v-pills-snake').hasClass('active') ? '' : $('#v-pills-snake').trigger('click');
    }, TimeOutNumber);
  });

  $('#v-pills-spider').click(() => {
    setTimeout(() => {
      $('#v-pills-spider2').hasClass('active') ? '' : $('#v-pills-spider2').trigger('click');
    }, TimeOutNumber);
  });
  $('#v-pills-spider2').click(() => {
    setTimeout(() => {
      $('#v-pills-spider').hasClass('active') ? '' : $('#v-pills-spider').trigger('click');
    }, TimeOutNumber);
  });

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Toggleable Pills</h2>
  <br>
  <div class="row">
    <div class="col-4">
      <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <a class="nav-link" id="v-pills-dog" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="false">Dog</a>
        <a class="nav-link" id="v-pills-cat" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Cat</a>
        <a class="nav-link active" id="v-pills-snake" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="true">Snake</a>
        <a class="nav-link" id="v-pills-spider" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Spider</a>
      </div>
    </div>
    <div class="col-4">
      <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
          <p><b>DOG - LAB</b> Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur
            laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.</p>
        </div>
        <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
          <p><b>CAT - SIAMESE</b> Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam.
            Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.</p>
        </div>
        <div class="tab-pane fade active show" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
          <p><b>SNAKE - PYTHON</b> Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem
            do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.</p>
        </div>
        <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
          <p><b>SPIDER - BLACK SPIDER</b> Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit
            consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.</p>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <a class="nav-link" id="v-pills-dog2" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="false">Lab</a>
        <a class="nav-link" id="v-pills-cat2" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Siamese</a>
        <a class="nav-link active" id="v-pills-snake2" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="true">Python</a>
        <a class="nav-link" id="v-pills-spider2" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Black Widow</a>
      </div>
    </div>
  </div>