Всем привет, совсем забыл как называется данная фича.Довольно распространенная. Кто-нибудь знает как она называется?при клике на строку меняется содержимое изображения, а также положение скролла.
и желательно модуль с плавной сменой изображения
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВсем привет, совсем забыл как называется данная фича.Довольно распространенная. Кто-нибудь знает как она называется?при клике на строку меняется содержимое изображения, а также положение скролла.
и желательно модуль с плавной сменой изображения
Есть такая штука - называются tabs (вкладки), подобных скриптов очень много.
Как-то даже я писал подобный, правда он на JQ.
$('.tabs-block .tab-link').on('click',function(){
if(!$(this).hasClass('active')) {
var parentTabs = $(this).closest('.tabs-block');
parentTabs.find('.tab-link.active, .tab-content.active').removeClass('active');
var elemIndex = $(this).index();
$(this).addClass('active');
parentTabs.find('.tab-content').eq(elemIndex).addClass('active');
}
});
body {background: #ddd;}
.tabs-block {display: block; width: 100%; border-radius: 3px; overflow: hidden;}
.tab-link-block {display: block; width: 100%; background: #4184f3; overflow: hidden;}
.tab-link {padding: 0 10px; height: 50px; line-height: 50px; color: #bbb; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer;}
.tab-link:not(.active):hover {background: rgba(255,255,255,.1);}
.tab-link.active {background: rgba(255,255,255,.1); color: #fff;}
.tab-content-block {display: block; width: calc(100% - 20px); min-height: calc(50px - 20px); padding: 10px; background: #fefefe; color: #333;}
.tab-content:not(.active) {display: none;}
/* horizontal */
.tabs-block:not(.-vertical) .tab-link-block {height: 50px;}
.tabs-block:not(.-vertical) .tab-link-block::after {content: ''; display: block; clear: both;}
.tabs-block:not(.-vertical) .tab-link {display: inline-block; float: left; min-width: calc(50px - 20px); max-width: calc(150px - 20px); margin-right: 2px;}
.tabs-block:not(.-vertical) .tab-link.active {box-shadow: 0 -3px 0 0 #f4b142 inset;}
.tabs-block:not(.-vertical) .tab-link:last-child {margin-right: 0;}
/* horizontal */
/* vertical */
.tabs-block.-vertical {display: grid; grid-template-columns: 150px 1fr; grid-gap: 0;}
.tabs-block.-vertical .tab-link {display: block; width: calc(100% - 20px);}
.tabs-block.-vertical .tab-link.active {box-shadow: -3px 0 0 0 #f4b142 inset;}
/* vertical */
.tab-link {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; transition: all linear .2s;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs-block -vertical">
<div class="tab-link-block">
<div class="tab-link active">Первая вкладка</div>
<div class="tab-link">Вторая вкладка</div>
<div class="tab-link">Третья вкладка</div>
</div>
<div class="tab-content-block">
<div class="tab-content active">1</div>
<div class="tab-content">2</div>
<div class="tab-content">3</div>
</div>
</div>
Стилизация под шаблон.
$('.tab-block .tabs .item').eq(0).addClass('active');
$('.tab-block .tab-content .item').eq(0).addClass('active');
let tabsH = $('.tab-block .tabs').height();
$('.tab-block .tab-content').css('min-height', tabsH);
$('.tab-block .tabs .item').on('click', function() {
let i = $(this).index(),
parent = $(this).closest('.tab-block');
parent.find('.item.active').removeClass('active');
$(this).addClass('active');
parent.find('.tab-content .item').eq(i).addClass('active');
});
body {
margin: 0;
min-height: 100vh;
background: linear-gradient(to bottom, rgba(162, 213, 244, 1) 0%, rgba(236, 172, 170, 1) 100%);
}
.tab-block {
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 10px;
box-sizing: border-box;
}
.tab-block::after {
content: '';
display: block;
clear: both;
}
.tab-block .tabs,
.tab-block .tab-content {
display: inline-block;
float: left;
box-sizing: border-box;
}
.tab-block .tabs {
width: 300px;
border-left: 2px solid #fff;
}
.tab-block .tabs .item {
padding: 5px 10px;
width: 100%;
color: #333;
box-sizing: border-box;
cursor: pointer;
}
.tab-block .tabs .item.active {
border-left: 2px solid #0c569b;
color: #0c569b;
margin-left: -2px;
}
.tab-block .tab-content {
width: calc(100% - 300px);
border: 1px solid #333;
box-shadow: 0 0 1px 1px rgba(255, 0, 0, .25), 0 0 1px 1px rgba(0, 255, 255, .25) inset;
padding: 10px;
}
.tab-block .tab-content .item:not(.active) {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-block">
<div class="tabs">
<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="tab-content">
<div class="item">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>
</div>
С эффектом исчезновения
$('.tab-block .tabs .item').eq(0).addClass('active');
$('.tab-block .tab-content .item').eq(0).show();
let tabsH = $('.tab-block .tabs').height();
$('.tab-block .tab-content').css('min-height', tabsH);
$('.tab-block .tabs .item').on('click', function() {
let i = $(this).index(),
parent = $(this).closest('.tab-block');
parent.find('.tabs .item.active').removeClass('active');
$(this).addClass('active');
parent.find('.tab-content .item').fadeOut(300).eq(i).fadeIn(300);;
});
body {
margin: 0;
min-height: 100vh;
background: linear-gradient(to bottom, rgba(162, 213, 244, 1) 0%, rgba(236, 172, 170, 1) 100%);
}
.tab-block {
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 10px;
box-sizing: border-box;
}
.tab-block::after {
content: '';
display: block;
clear: both;
}
.tab-block .tabs,
.tab-block .tab-content {
display: inline-block;
float: left;
box-sizing: border-box;
}
.tab-block .tabs {
width: 300px;
border-left: 2px solid #fff;
}
.tab-block .tabs .item {
padding: 5px 10px;
width: 100%;
color: #333;
box-sizing: border-box;
cursor: pointer;
transition: all linear .3s;
box-shadow: -2px 0 0 0 transparent;
}
.tab-block .tabs .item.active {
color: #0c569b;
box-shadow: -2px 0 0 0 #0c569b;
}
.tab-block .tab-content {
width: calc(100% - 300px);
border: 1px solid #333;
box-shadow: 0 0 1px 1px rgba(255, 0, 0, .25), 0 0 1px 1px rgba(0, 255, 255, .25) inset;
position: relative;
}
.tab-block .tab-content .item {
display: none;
padding: 10px;
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-block">
<div class="tabs">
<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="tab-content">
<div class="item">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>
</div>