Как менять содержимое div, по ссылке?
На jquery можно так:
$('ul li a').on('click', function (e) {
    e.preventDefault();
    const index = $(this).parent().index();
    $('.col-10 > div').removeClass('active').eq(index).addClass('active');
})

Ну а в классе active уже прописывай нужные тебе анимации появления. либо просто display none/block
Судя по коду, вы используете bootstrap. Компонент tabs вам в помощь. А вообще без JavaScript это не реализуется.