<style>
/*Добавляем отступы у табов*/
.mytab {
padding: 10px 10px 10px 20px;
display: inline-block;
width: inherit;
box-sizing: border-box;
}
/*При наведении добавляем выступ справа*/
.mytab:hover:after , .activetab:after {
content: '';
position: absolute;
right: -61px;
top: 0px;
border: 33px solid transparent;
border-left: 28px solid #FF5757;
}
/*При наведении меняем цвет*/
.mytab:hover , .activetab {
background: #FF5757;
color: #ffffff !important;
box-shadow: -4px 3px 20px 2px #a2a2a2;
}
/*Отступы у иконок*/
.myicon , .myiconb {
padding-top:8px;
}
/*Прозрачность активной иконки*/
.activeicon {
opacity: 0 !important;
}
</style>
<script>
//Добавляем класс к табам
$('[href="#mylink"]').addClass('mytab');
//Добавляем класс к иконкам на переднем плане
$('[href="#icon"]').addClass('myicon');
//Добавляем класс к иконкам на заднем плане
$('[href="#iconb"]').addClass('myiconb');
//Добавляем класс к заголовку
$('[field="tn_text_1531315835300"]').addClass('mytitle');
//Добавляем класс к тексту
$('[field="tn_text_1531315998275"]').addClass('mytext');
//Добавляем класс к фоновой картинке
$('[href="#mypicfon"]').addClass('myfon');
//При старте выделяем вервый таб и скрываем переднюю иконку
$('.mytab:eq(0)').addClass('activetab');
$('.myicon:eq(0)').addClass('activeicon');
//Объявляем порядковую переменную
var number = 0;
//При наведении на таб делаем прозрачную иконку на переднем плане
$('.mytab').hover(function(){
//Вычисляем номер нашего таба
number = $(".mytab").index(this);
//Скрываем переднюю иконку при наведении
$('.myicon:eq('+number+')').css('opacity' , '0');}, function(){
//Показываем переднюю иконку при потере фокуса
$('.myicon:eq('+number+')').css('opacity' , '1');});
//При клике на таб
$('.mytab').click(function(event) {
//Добавляем фото фонов
$('.myfon').css('opacity' , '0.15');
//Удаляем классы активной вкладки
$('.mytab').removeClass('activetab');
$('.myicon').removeClass('activeicon');
//Активируем ту вкладку , на которую кликнули
$('.mytab:eq('+number+')').addClass('activetab');
$('.myicon:eq('+number+')').addClass('activeicon');
//Производим изменения в контенте при клике на табы
if (number==0){
$('.mytitle').html('Уголовные дела');
$('.mytext').html('Общеизвестно, что все новое - это хорошо забытое старое. В свое время в пылу реформаторства кто-то необдуманно (а может, и по иным неведомым автору причинам) отнял у суда право соединять уголовные дела в одно производство, "выплеснув ребенка из колыбели". При этом до изменений уголовно-процессуального закона суд был наделен таким правом, ибо согласно ч. 3 ст. 26 УПК РСФСР соединение и выделение дел производилось по постановлению лица, производящего дознание, следователя, прокурора либо по определению или постановлению суда.');
$(".myfon").hide();$(".myfon:eq(0)").show();
};
if (number==1){
$('.mytitle').html('Жилищные дела');
$('.mytext').html('Жилищные вопросы – это самые распространенные дела в судебной практике. С тех пор как жилье стало еще и объектом инвестиций, количество дел, связанных с недвижимостью постоянно растет. Особенно нужна помощь жилищного адвоката при покупке жилья, потому что в этой области обычно много мошенников. Самостоятельно трудно получить необходимые документы на квартиру, которую вы только собираетесь покупать. А согласно закону «Об адвокатской деятельности и адвокатуре в Российской Федерации» адвокат имеет право получать любые документы от государственных органов.');
$(".myfon").hide();$(".myfon:eq(1)").show();
};
if (number==2){
$('.mytitle').html('Наследственные дела');
$('.mytext').html('Наследственное дело открывает нотариус. Это один из этапов принятия наследства. Обычно его заводят по последнему месту жительства умершего. Место жительства — это там, где была постоянная регистрация. Иногда наследственное дело открывают по месту временного пребывания или нахождения имущества. Для этого кто-то должен обратиться к нотариусу с заявлением и документами о смерти.');
$(".myfon").hide();$(".myfon:eq(2)").show();
};
if (number==3){
$('.mytitle').html('Семейные дела');
$('.mytext').html('Квалифицированный юрист, владеющий нормами семейного права, может справиться с решением любых проблем в данной сфере взаимоотношений, которые связаны с заключением или расторжением брака, имущественным разделом или урегулированием споров о детях. Многие конфликты в семье удается уладить его участникам самостоятельно. Однако зачастую для более оперативного и грамотного решения проблемы обращаются к правозащитнику, который регулярно отслеживает появляющиеся изменения в законах.');
$(".myfon").hide();$(".myfon:eq(3)").show();
};
if (number==4){
$('.mytitle').html('Земельные споры');
$('.mytext').html('Как бы странно это не звучало, но самой распространенной причиной нарушения границ участков земли является халатность. Именно при ненадлежащем выполнении своих обязанностей кадастровые инженеры допускают нарушения границ.');
$(".myfon").hide();$(".myfon:eq(4)").show();
};
event.preventDefault();});
</script>