-3

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

4

1 ответ 1

2

Вариант на jQuery

$('.tabs-content').on('click', '.tabs .item', function(){
  if(!$(this).hasClass('--active'))
    TabsChange($('.tabs-content'), $(this).index());
}).on('click', '.content-wrap .buttons > div', function(){
  if($(this).hasClass('--prev') || $(this).hasClass('--next')) {
    let index = $('.tabs-content').find('.item.--active').index(),
        len = $('.tabs-content').find('.tabs .item').length - 1;
    index = $(this).hasClass('--prev') ? (index - 1 < 0 ? len : index - 1) : (index + 1 > len ? 0 : index + 1);
    TabsChange($('.tabs-content'), index);
  }
});

function TabsChange(parent, index) {
  let tab = parent.find('.tabs .item').eq(index);
  tab.closest('.tabs').find('.item.--active').removeClass('--active');
  tab.addClass('--active');
  //
  parent.find('.content .item.--active').removeClass('--active');
  parent.find('.content .item').eq(index).addClass('--active');
}
.tabs-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.tabs-content .tabs {
  display: block;
  max-width: 50%;
  margin-right: 10px;
}

.tabs-content .tabs .item {
  display: block;
  width: 100%;
  padding: 5px 0;
  font-weight: bold;
  cursor: pointer;
} 

.tabs-content .tabs .item:not(:last-child) {
  border-bottom: 1px dashed #666;
}

.tabs-content .tabs .item:not(.--active):hover,
.tabs-content .tabs .item.--active {
  color: #3399af;
}

.tabs-content .content-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}

.tabs-content .content-wrap .content {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

.tabs-content .content-wrap .content .item {
  display: none;
  width: 100%;
}

.tabs-content .content-wrap .content .item.--active {
  display: block;
}

.tabs-content .content-wrap .buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.tabs-content .content-wrap .buttons > div {
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
}

.tabs-content .content-wrap .buttons .--prev {
  margin-right: 10px;
  justify-content: flex-start;
}

.tabs-content .content-wrap .buttons .--next {
  justify-content: flex-end;
  text-align: right;
}

.tabs-content .content-wrap .buttons .--prev::before,
.tabs-content .content-wrap .buttons .--next::after {
  display: inline-block;
  font-weight: bold;
}

.tabs-content .content-wrap .buttons .--prev::before {
  content: '<';
  margin-right: 5px;
}

.tabs-content .content-wrap .buttons .--next::after {
  content: '>';
  margin-left: 5px;
}

.tabs-content .tabs .item,
.tabs-content .content-wrap .buttons > div {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tabs-content">
  <div class="tabs">
    <div class="item --active">1. Поставка оборудования</div>
    <div class="item">2. Очищение</div>
    <div class="item">3. Оценка на трудоспособность и разборка</div>
    <div class="item">4. Входящий тест и аудит</div>
    <div class="item">5. Разборка решения</div>
    <div class="item">6. Сборка</div>
    <div class="item">7. Тестирование и контроль качества</div>
    <div class="item">8. Упаковка и доставка</div>
  </div>
  <div class="content-wrap">
    <div class="content">
      <div class="item --active">Первый этап</div>
      <div class="item">Второй</div>
      <div class="item">Третий</div>
      <div class="item">Четвёртый</div>
      <div class="item">Пятый</div>
      <div class="item">Шестой</div>
      <div class="item">Седьмой</div>
      <div class="item">Восьмой</div>
    </div>
    <div class="buttons">
      <div class="--prev">Предыдущий этап</div>
      <div class="--next">Следующий этап</div>
    </div>
  </div>
</div>

0

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.