Как соединить линиями блоки div?

Добрый день, есть интерактивный элемент на сайте
5ce7bf5208f06504382435.jpeg
При выборе маленького блока, меняется содержимое большого. Нужно что бы маленький активный соединялся с большим линией, как это реализовать даже представить не могу.
Сам функционал реализован с помощью bootstrap tab и имеет следующую структуру
<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Где tab-content это содержимое большого блока.

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

Может есть какие то плагины для реализации, или подскажите как искать, по запросам соединить линиями блоки div ни чего не выдает.
  • Вопрос задан
  • 1948 просмотров
Пригласить эксперта
Ответы на вопрос 2
arsenty
@arsenty
Full Stack Designer
Без JS и с описанной адаптивностью: https://codepen.io/arsenty/pen/mYxXoQ
Ответ написан
freislot
@freislot
Frontend-разработчик
https://codepen.io/freislot/pen/YbaEjm

Накидал в форме бреда, ответ не претендует на качество и все такое. Нужно будет пилить под вашу верстку и встраивать в ваш код. Я лишь показываю вам просто как идею для примера. Про плагины не подскажу, сделал на скорую руку первое, что пришло в голову. Ну и адаптив как бы есть, но лучше на resize window сесть и правки внести на нужных экранах. В общем не знаю) решать вам что делать с этим дальше. Успехов
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
Девять линий Ульяновск
от 45 000 до 80 000 руб.
Krome Photos Челябинск
от 80 000 руб.
24 июн. 2019, в 17:46
5000 руб./за проект
24 июн. 2019, в 17:44
700 руб./за проект
24 июн. 2019, в 16:55
5000 руб./за проект