JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

<h3>Кликаем по ссылкам</h3>
<div class="part">
    <a href="#" class="showA">Блок А</a><a href="#" class="showB">Блок Б</a>
    <div class="blockA">Блок А</div>
    <div class="blockB">Блок Б</div>
</div>

<div class="part">
    <a href="#" class="showA">Блок А</a><a href="#" class="showB">Блок Б</a>
    <div class="blockA">Блок А</div>
    <div class="blockB">Блок Б</div>
</div>

CSS

.blockA, .blockB {
    position: absolute;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    color: #FFF;
    opacity: 0;
}
.blockA {
    background: #060;
}
.blockB {
    background: #036;
}
.showA , .showB {
    display: inline-block;
    padding: 10px;
}
.part {
    float: left;
    margin-right: 50px;
}
.active {
    margin: 0;
    z-index: 10;
}

JavaScript

var links = $('.part a');

links.click(function(){
    var indx = $(this).index();
    var blocks = $(this).siblings('div');
    blocks.animate({
        opacity: 0
    }).eq(indx).animate({
        opacity: 1
    });
});