html css js 实现tab标签页示例代码
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
代码如下:
<html xmlns=>
<head>
<meta http-equiv=content-type content=text/html; charset=gbk />
<meta http-equiv=content-language content=zh-cn />
<meta name=roots content= />
<meta name=keywords content= />
<meta name=description content= />
<title></title>
<style type=text/css>
body{font:宋体;font-size:12px;}
a:link,a:visited{font-size:12px;color:#666;text-decoration:none;}
a:hover{color:#ff0000;text-decoration:underline;}
#tab{margin:0 auto;width:220px;border:1px solid #bce2f3;}
.menubox{height:28px;border-bottom:1px solid #64b8e4;background:#e4f2fb;}
.menubox ul{list-style:none;margin:7px 40px;padding:0;position:absolute;}
.menubox ul li{float:left;background:#64b8e4;line-height:20px;display:block;cursor:pointer;width:65px;text-al ign:center;color:#fff;font-weight:bold;border-top:1px solid #64b8e4;border-left:1px solid #64b8e4;border-right:1px solid #64b8e4;}
.menubox ul li.hover{background:#fff;border-bottom:1px solid #fff;color:#147ab8;}
.contentbox{clear:both;margin-top:0px;border-top:none;height:181px;padding-top:8px;heigh t:100%;}
.contentbox ul{list-style:none;margin:7px;padding:0;}
.contentbox ul li{line-height:24px;border-bottom:1px dotted #ccc;}
</style>
<script>
<!--
function settab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getelementbyid(name+i);
var con=document.getelementbyid(con_+name+_+i);
menu.classname=i==cursel?hover:;
con.style.display=i==cursel?block:none;
}
}
//-->
</script>
</head>
<body>
<div id=tab>
<div class=menubox>
<ul>
<li id=menu1 onmouseover=settab('menu',1,2) class=hover>高职高专</li> <li id=menu2 onmouseover=settab('menu',2,2) >民办学校</li>
</ul>
</div>
<div class=contentbox>
<div id=con_menu_1 class=hover>
<ul>
<li>·<a href=#>北京工业职业技术学院</a></li>
<li>·<a href=#>北京财贸职业学院</a></li>
<li>·<a href=#>天津职业大学</a></li>
<li>·<a href=#>大连职业技术学院</a></li>
<li>·<a href=#>辽宁交通高等专科学校</a></li>
<li>·<a href=#>浙江金融职业学院</a></li>
<li>·<a href=#>山东商业职业技术学院</a></li>
<li>·<a href=#>宁波职业技术学院</a></li>
<li>·<a href=#>武汉职业技术学院</a></li>
</ul>
</div>
<div id=con_menu_2 style=display:none>
<ul>
<li>·<a href=#>江西蓝天学院</a></li>
<li>·<a href=#>西安外事学院</a></li>
<li>·<a href=#>湖南涉外经济学院</a></li>
<li>·<a href=#>西安翻译学院</a></li>
<li>·<a href=#>三江学院</a></li>
<li>·<a href=#>北京城市学院</a></li>
<li>·<a href=#>黄河科技学院</a></li>
<li>·<a href=#>吉林华桥外国语学院</a></li>
<li>·<a href=#>浙江树人学院</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>