HTML实现点击左侧菜单，右侧内容切换

1. html代码

<div class="iframe">
    <div class="main_left" style="height: 100%">
	    <ul>
		    <li data-src="1.html">11</li>
		    <li data-src="2.html">22</li>
			<li data-src="3.html">33</li>
		</ul>
	</div>
	<div class="main_right">
	<iframe frameborder="0" scrolling="yes" style="width: 80%;height: 100%;" src="1.html" id="aa"></iframe>
	</div>
</div>

 2. css代码

.main_left{
    width: 150px;
	height: 100%;
	float:left;
	background:#c0c0c0;
	cursor:pointer;
}

3. js代码

<script type="text/javascript">
    let items = document.getElementsByTagName("li");
	for(let i=0; i<items.length; i++) {
		items[i].onclick = function (){
			let src = items[i].getAttribute("data-src")
			document.getElementById("aa").setAttribute("src", src)
		}
	}
</script>