не могу сделать кое что. В выделенной области на картинке, нужно при нажатии на каждый пункт списка чтоб справа открывалась соотвествующая секция, при этом стараю удалялась
1 ответ
Вариант на 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>
при этом стараю удалялась
?