JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li>
        <a class="menu_link" href="http://www.w3schools.com" target="frame">Ссылка 1</a>
    </li>
    <li>
        <a class="menu_link" href="http://validator.w3.org/" target="frame">Ссылка 2</a>
    </li>
    <li>
        <a class="menu_link" href="http://www.w3schools.com" target="frame">Ссылка 3</a>
    </li>
    <li>
        <a class="menu_link" href="http://validator.w3.org/" target="frame">Ссылка 4</a>
    </li>
</ul>

<iframe name="frame" src="http://www.w3schools.com"></iframe>

CSS

.menu {
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

.menu_link {
    color: #555;
}

.menu_link.active {
    font-weight: bold;
    color: #900;
}

iframe {
    width: 100%;
    height: 500px;
}

JavaScript

$(document).ready(function(){
    var links = $('.menu_link');
    
    links.first().addClass('active');
    
    links.on('click', function(){
        links.removeClass('active');
        $(this).addClass('active');
    });
});