<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>