做为前端开发者，项目中应该经常会碰到这种的页面布局: 点击左侧一栏目，右侧即显示相应的不同页面内容。记得每次遇到这种时都头痛不已，不光考虑页面，还要考虑到之后怎么进行页面间的数据传递等事情。难的有心情，来一波以往实现方式大总结。
先写最近get到的方法，恍然大悟的赶脚。
way1: a标签+iframe 要点: target属性 iframe的id和name属性 （之后再也不用写js控制跳转页面啦）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="http://frontend.house365.com/css/reset.css" />
<style>
.container{
width: 1260px;
margin:100px auto;
background: #ddd;
}
ul{float:left;width: 20%;}
.content-wrapper{
float: left;
width: 80%;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="tab1.html" target="ifra">页面1</a></li>
<li><a href="tab2.html" target="ifra">页面2</a></li>
</ul>
<div class="content-wrapper">
<iframe id="ifra" name="ifra" width="100%" height="100%" src="tab1.html"></iframe>
</div>
</div>
</body>
</html>
3993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
