点击左侧 - 右侧页面对应刷新（iframe）

在工作方面的需求，需要实现点击左侧栏目，右侧的内容对应更改。

这里，我运用了iframe来实现这个功能！（布局的话,使用了flex弹性布局）

完整效果图。

左侧导航显示代码：

	

	    
博客
	    
携程
	    
地图
	

右侧内容展示代码：

其中所有的关联是a标签中的 target="iframe_a" 控制的

css样式设置：

            html,
			body {
				margin: 0px;
				width: 100%;
				height: 100%;
			}

			.bigBox {
				display: flex;
				flex-direction: column;
				height: 100%;
			}

			.header {
				text-align: center;
				background: #a7176b;
				color: white;
				line-height: 40px;
			}

			.content {
				background: #FFEB3B;
				display: flex;
				flex-flow: row;
			}

			.right_box {
				background-color: #774949;
			}

			li {
				line-height: 30px;
				list-style: none;
			}

			iframe {
				border: none;
			}

完整代码！

	
		
		
		
	
	
		

			
头部
			

				

					

						
博客
						
携程
						
地图