JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class='container'>
<ul class='left'>
    <li><a data-frame='fr1' href='index1.html' target='some_frame'>Link 1</a></li>
    <li><a data-frame='fr2' href='index2.html' target='some_frame'>Link 2</a></li>
    <li><a data-frame='fr3' href='index3.html' target='some_frame'>Link 3</a></li>
</ul>
<iframe name='some_frame' width='400' height='200' src='index1.html'></iframe>
<div class='right'>
    <div class='fr1'>
        содержимое div.right <span style='color:#f00;'>при активном фрейме 1</span>
    </div>
    <div class='fr2'>
        содержимое div.right <span style='color:#0f0;'>при активном фрейме 2</span>
    </div>
    <div class='fr3'>
        содержимое div.right <span style='color:#00f;'>при активном фрейме 3</span>
    </div>
    
</div>
</div>

CSS

.container{
    width:700px;
}
.left, iframe, .right{
    float:left;
    margin-right:20px;
}
.right > div[class^='fr']{
    display:none;
}
.right > div.fr1{
	display:block;
}

JavaScript

/*var links = document.querySelectorAll('ul.left a');
var frame_navs = document.querySelectorAll('div[class *= "fr"]')
	for(var i = 0, length = links.length; i < length; i++){
		links[i].onclick = function(){
			for(var j = 0, fr_length = frame_navs.length; j < fr_length; j++){
				frame_navs[j].style.display = 'none';
			}
			document.querySelector('.right .' + this.getAttribute('data-frame')).style.display = 'block';	
		}
	}*/
var $links = $('ul.left a');
var $frame_navs = $('div[class^="fr"]');
$links.click(function(){
    $frame_navs.css('display', 'none');
    $('.right .' + this.getAttribute('data-frame')).css('display', 'block');
});