这也是我几年前遇到的一个问题了。
1、用iframe（z-index经常失效，也就是你遇到的问题）。
2、用object。
3、将共用的头部和脚部转换成js（百度搜索HTML转换成JS），然后用调用js的方法调用它们即可。
4、结合您的问题，建议用第一个方法，欢迎继续追问。
可以用选项卡试试，参考下面代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>竖向选项卡</title>
<style type="text/css">
<!--
.left_box{
margin: 0
padding: 0
font-weight: normal
font-style: normal
font-size: 100%
font-family: inherit
}
.infopublish ul.left_box li {
line-height: 1.89
}
body {
color: #333
text-align: left
font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif
width:300px
}
ol, ul {
list-style: none
}
.box{
border:1px solid #99BBDD
padding-bottom:2px}
.box_1 ul{
padding:5px
}
.box_title{
position: relative
height: 28px
}
.box_title h3 {
height: 26px
line-height: 26px
margin: 1px 1px 0
padding: 0 10px
font-weight: bold
font-size: 120%
color: #275c91
}
.box_title span {
float:right
padding-top:5px
padding-right:5px
}.infopublish {
border-color: #7bce74
}
.infopublish .box_title {
background: none
}
.infopublish .box_title h3 {
height: 30px
line-height: 30px
margin: 1px 1px 0
color: #fff
background: url(nav.png) repeat-x 0 -390px
}
* html .clearfix {
height: 1%
}
.clearfix {
display: block
}
/**/
.clearfix:after {
content: "."
clear: both
display: block
height: 0
visibility: hidden
}
.v-tab {
width: 71px
float: left
display: inline
overflow: hidden
margin: -2px 1px -6px -5px !important
margin: -5px 1px -6px -5px
}.v-tab li {
float: left
}
.v-tab li a {
float: left
width: 70px
height: 29px
line-height: 29px
text-align: center
background: #ebf7e9
border: solid #7bce74
border-width: 0 1px 1px 0
}
.v-tab li a:link,
.v-tab li a:visited {
color: #2e7428
}
.v-tab li a.current,
.v-tab li a:hover,
.v-tab li a:active {
background: #fff
border-right: 0
font-weight: bold
padding-right: 1px
}
.box .left_box li{
line-height:24px
}
.disable {
display: none
}
-->
</style>
<script language="javascript" type="text/javascript">
function doClick_jy(o){
o.className="current"
var j
var id
var e
for(var i=1i<=8i++){
id ="jy"+i
j = document.getElementById(id)
e = document.getElementById("jy_con"+i)
if(id != o.id){
j.className=""
e.style.display = "none"
}else{
e.style.display = "block"
}
}
}</script>
</head><body>
<div class="box infopublish">
<div class="box_1 clearfix">
<ul class="v-tab">
<li><a href="#" class="current" id="jy1" onmouseover="javascript:doClick_jy(this)">标签1</a></li>
<li><a href="#" id="jy2" onmouseover="javascript:doClick_jy(this)">标签2</a></li>
<li><a href="#" id="jy3" onmouseover="javascript:doClick_jy(this)">标签3</a></li>
<li><a href="#" id="jy4" onmouseover="javascript:doClick_jy(this)">标签4</a></li>
<li><a href="#" id="jy5" onmouseover="javascript:doClick_jy(this)">标签5</a></li>
<li><a href="#" id="jy6" onmouseover="javascript:doClick_jy(this)">标签6</a></li>
<li><a href="#" id="jy7" onmouseover="javascript:doClick_jy(this)">标签7</a></li>
<li><a href="#" id="jy8" onmouseover="javascript:doClick_jy(this)">标签8</a></li>
</ul>
<ul class="left_box" style="display:block" id="jy_con1">
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
</ul>
<ul class="left_box disable" id="jy_con2">
<li>22222222222222</li>
<li>22222222222222</li>
<li>22222222222222</li>
<li>22222222222222</li>
</ul>
<ul class="left_box disable" id="jy_con3">
<li>33333333333333</li>
<li>22222222222222</li>
<li>22222222222222</li>
<li>22222222222222</li>
</ul>
<ul class="left_box disable" id="jy_con4">
<li>44444444444444</li>
<li>22222222222222</li>
<li>22222222222222</li>
<li>22222222222222</li>
</ul>
<ul class="left_box disable" id="jy_con5">
<li>55555555555555</li>
<li>22222222222222</li>
<li>22222222222222</li>
<li>22222222222222</li>
</ul>
<ul class="left_box disable" id="jy_con6">
<li>66666666666666</li>
<li>22222222222222</li>
<li>22222222222222</li>
<li>22222222222222</li>
</ul>
<ul class="left_box disable" id="jy_con7">
<li>77777777777777</li>
<li>22222222222222</li>
<li>22222222222222</li>
<li>22222222222222</li>
</ul>
<ul class="left_box disable" id="jy_con8">
<li>88888888888888</li>
<li>22222222222222</li>
<li>22222222222222</li>
<li>22222222222222</li>
</ul>
</div>
</div>
</body>
</html>
