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

1. html代码

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

 2. css代码

1.  
   .main_left{
2.  
   width: 150px;
3.  
   height: 100%;
4.  
   float:left;
5.  
   background:#c0c0c0;
6.  
   cursor:pointer;
7.  
   }

3. js代码

1.  
   <script type="text/javascript">
2.  
   let items = document.getElementsByTagName("li");
3.  
   for(let i=0; i<items.length; i ) {
4.  
   items[i].onclick = function (){
5.  
   let src = items[i].getAttribute("data-src")
6.  
   document.getElementById("aa").setAttribute("src", src)
7.  
   }
8.  
   }
9.  
   </script>

这篇好文章是转载于：学新通技术网