JSFiddle - React, Tailwind, and code Playground

HTML

<div class="testBlock">
    <div class="testList">
        <ul>
            <li><a href="#">Ссылка 1</a>

            </li>
            <li><a href="#">Ссылка 2</a>

            </li>
            <li><a href="#">Ссылка 3</a>

            </li>
            <li><a href="#">Ссылка 4</a>

            </li>
        </ul>
    </div>
    <div class="testDesc">
        <div style="display: none;">Описание из ссылки 1</div>
        <div style="display: none;">Описание из ссылки 2</div>
        <div style="display: none;">Описание из ссылки 3</div>
        <div style="display: none;">Описание из ссылки 4</div>
    </div>
</div>

CSS

.testBlock {
    width: 400px;
    height: 400px;
    outline: 1px solid red;
}
.testList {
    float: left;
    width: 150px;
}
.testList ul {
    list-style: none;
}
.testList li a {
    text-decoration: none;
    color: #000;
}
.testDesc {
    float: right;
    width: 250px;
    height: 150px;
}
.testDesc div {
    height: 100%!important;
    border: 1px solid black;
    background: #EAEAEA;
}

JavaScript

var lists = $(".testList li"), //объекты нашего списка
    descs = $(".testDesc div"), //блоки с описаниями

    //массив с цветами (будут использоваться по очереди)
    colors = new Array("#917E6A", "#D57363", "#B0DB7F", "#99CDDB");

$(".testList li").click(function (e) {
    e.preventDefault(); //что бы не срабатывали клики по ссылкам

    //перебираем все дивы с описаниями
    for (var i = 0; i < descs.length; i++) {
        descs[i].style.display = "none"; //скрываем все div-ы с описанием
        lists[i].getElementsByTagName("a")[0].style.backgroundColor = "transparent";
    }
    isClick = lists.index(this); //индекс объекта по которому был произведен клик
    var its = descs[isClick]; //индекс объекта с описанием


});